@sinchsmb/ui-kit/src/form/Switch/styled.ts

UI kit for SinchSMB frontend

import styled from 'styled-components/macro';

import { color, shadow } from '../../theme';

import { SwitchSize } from './constants';

const animationDuration = 100;

interface StyledSwitchProps {
  $size: SwitchSize.Small | SwitchSize.Default;
}

export const StyledSwitch = styled.input<StyledSwitchProps>`
  appearance: none;
  background-color: ${color('ref/palette/gray/200')};
  border-radius: 13px;
  border-style: none;
  height: ${(props) => (props.$size === SwitchSize.Small ? '18px' : '26px')};
  margin: 0;
  outline: none;
  position: relative;
  transition: background-color ${animationDuration}ms linear;
  width: ${(props) => (props.$size === SwitchSize.Small ? '30px' : '50px')};

  &:before {
    background-color: ${color('sys/color/white')};
    border-radius: 10px;
    box-sizing: border-box;
    content: '';
    display: block;
    height: ${(props) => (props.$size === SwitchSize.Small ? '14px' : '20px')};
    left: ${(props) => (props.$size === SwitchSize.Small ? '2px' : '3px')};
    position: absolute;
    top: ${(props) => (props.$size === SwitchSize.Small ? '2px' : '3px')};
    transition: left ${animationDuration}ms linear, width ${animationDuration}ms linear;
    width: ${(props) => (props.$size === SwitchSize.Small ? '14px' : '20px')};
  }

  &:disabled {
    background-color: ${color('ref/palette/gray/100')};
    cursor: not-allowed;

    &:before {
      background-color: ${color('ref/palette/gray/200')};
    }
  }

  &:checked {
    &:before {
      left: ${(props) => (props.$size === SwitchSize.Small ? '14px' : '27px')};
    }
  }

  &:hover:not(:disabled) {
    cursor: pointer;
  }

  &:checked:not(:disabled) {
    background-color: ${color('sys/color/primary/default')};
  }

  &:focus-visible:not(:disabled) {
    box-shadow: ${shadow('sys/shadow/focus')};
  }

  &:checked:hover:not(:disabled) {
    &:before {
      left: ${(props) => (props.$size === SwitchSize.Small ? '14px' : '27px')};
    }
  }
`;