import { style } from '@vanilla-extract/css';
import { color, config, toRem } from 'folds';

export const CheckButtonContainer = style({
  display: 'flex',
  alignItems: 'center',
  justifyContent: 'center',
  height: '32px',
  width: '32px',
});

export const CheckButton = style({
  all: 'unset',
  display: 'flex',
  alignItems: 'center',
  justifyContent: 'center',
  padding: 0,
  borderRadius: config.radii.R300,
  cursor: 'pointer',
  color: color.Secondary.Main,
  backgroundColor: 'transparent',
  transition: 'opacity 0.2s, background-color 0.15s',
  height: '32px',
  width: '32px',
  opacity: 0,
  WebkitAppRegion: 'no-drag',
  flexShrink: 0,

  selectors: {
    '&[data-visible="true"]': {
      opacity: 0.7,
    },
  },

  ':hover': {
    backgroundColor: color.Surface.ContainerHover,
    opacity: 1,
  },

  ':active': {
    backgroundColor: color.Surface.ContainerActive,
  },

  ':focus-visible': {
    outline: `2px solid ${color.Secondary.Main}`,
    outlineOffset: '2px',
    opacity: 1,
  },
});

export const UpdateButton = style({
  all: 'unset',
  display: 'flex',
  alignItems: 'center',
  justifyContent: 'center',
  padding: 0,
  borderRadius: config.radii.R300,
  cursor: 'pointer',
  color: color.Success.Main,
  backgroundColor: 'transparent',
  transition: 'background-color 0.15s',
  height: '32px',
  width: '32px',
  WebkitAppRegion: 'no-drag',
  flexShrink: 0,

  ':hover': {
    backgroundColor: color.Surface.ContainerHover,
  },

  ':active': {
    backgroundColor: color.Surface.ContainerActive,
  },

  ':focus-visible': {
    outline: `2px solid ${color.Success.Main}`,
    outlineOffset: '2px',
  },
});

export const UpdateMenu = style({
  minWidth: toRem(280),
  maxWidth: toRem(320),
  backgroundColor: color.Surface.Container,
  borderRadius: config.radii.R400,
  boxShadow: config.shadow.E400,
  border: `1px solid ${color.Surface.ContainerLine}`,
});

export const ProgressText = style({
  color: color.Success.Main,
  fontWeight: 500,
  minWidth: toRem(35),
  textAlign: 'center',
});
