import { variables } from '@/index'
import styled from 'styled-components'

export const StyledSwitchContainer = styled.div`
  display: flex;
  gap: 16px;
  justify-content: space-between;
  align-items: center;
  width: 100%;
`

export const StyledSwitch = styled.label<{
  checked: boolean
  disabled: boolean
}>`
  cursor: ${({ disabled }) => (disabled ? 'not-allowed' : 'pointer')};
  text-indent: -9999px;
  width: 32px;
  height: 16px;
  transition: 500ms;

  background: ${({ checked, disabled }) =>
    disabled
      ? variables.colors.gray20
      : checked
        ? variables.colors.secondary50
        : variables.colors.gray30};

  display: block;
  border-radius: 50px;
  position: relative;
  &:after {
    content: '';
    position: absolute;
    left: ${({ checked }) => (checked ? 'calc(55% - 0px)' : '2px')};
    top: 2px;
    width: 12px;
    height: 12px;
    background: ${({ disabled }) =>
    disabled ? variables.colors.gray10 : variables.colors.white};

    background: ${({ checked, disabled }) =>
    disabled
      ? variables.colors.gray30
      : checked
        ? variables.colors.white
        : variables.colors.gray50};
    border-radius: 50px;
    transition: 500ms;
  }
`