import i from "styled-components";
import { getColorAlias as o, getSpacing as a, getDarkenColor as r, getFontSize as n } from "../../utils/index.js";
const s = i.div`
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 30px;
  &:focus-within {
    border-radius: 15px;
    box-shadow: 0 0 0 2px ${o("focusOuter")};
  }
`, t = i.span`
  position: absolute;
  cursor: pointer;
  width: 48px;
  height: 24px;
  background-color: ${o("interactiveForm")};
  transition: background-color 0.4s linear;
  border-radius: ${(e) => e.theme.radius.roundedC};
  svg {
    opacity: 0;
    position: absolute;
    fill: ${o("interactiveBrand")};
    top: ${a("s01")};
    left: ${a("s01")};
  }
  &:before {
    position: absolute;
    content: '';
    top: 2px;
    left: 2px;
    height: 20px;
    width: 20px;
    background-color: ${o("interactiveLight")};
    border-radius: ${(e) => e.theme.radius.roundedE};
    box-shadow: ${(e) => e.theme.elevation.e1};
    transition: 0.4s;
  }
`, d = i.input`
  opacity: 0;
  width: 0;
  height: 0;
  &:hover + ${t} {
    background-color: ${r("hover01", "interactiveForm")};
  }
  &:focus + ${t} {
    background-color: ${o("interactiveForm")};
  }
  &:active + ${t} {
    background-color: ${r("active01", "interactiveForm")};
  }
  &:checked + ${t} {
    background-color: ${o("interactiveBrand")};
    transition: background-color 0.4s linear;
    svg {
      opacity: 1;
      transform: translateX(24px);
      transition-property: opacity, transform, fill;
      transition-duration: 0.4s;
    }
    &:hover {
      background-color: ${r("hover01", "interactiveBrand")};
      svg {
        fill: ${r("hover01", "interactiveBrand")};
      }
    }
    &:active {
      background-color: ${r("active01", "interactiveBrand")};
      svg {
        fill: ${r("active01", "interactiveBrand")};
      }
    }
  }
  &:checked + ${t}:before {
    transform: translateX(24px);
  }
  &:disabled + ${t} {
    background-color: ${o("disabled01")};
    cursor: not-allowed;
    svg {
      fill: ${o("disabled01")};
    }
    &:before {
      background-color: ${o("contentLight")};
    }
  }
  &:disabled:hover + ${t} {
    background-color: ${o("disabled01")};
    svg {
      fill: ${o("disabled01")};
    }
  }
`, g = i.span`
  ${n("size16")};
  color: ${o("contentDefault")};
  margin-right: ${a("s02")};
  height: ${a("s05")};
  cursor: ${(e) => e.disabled ? "not-allowed" : "pointer"};
`, p = i.label`
  display: flex;
  justify-content: center;
  align-items: center;
`;
export {
  d as ToggleInput,
  g as ToggleLabel,
  t as ToggleSlider,
  s as ToggleWrapper,
  p as Wrapper
};
