"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var i=require("styled-components"),e=require("../../utils/index.js");function a(o){return o&&o.__esModule?o:{default:o}}var r=a(i);const l=r.default.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 ${e.getColorAlias("focusOuter")};
  }
`,t=r.default.span`
  position: absolute;
  cursor: pointer;
  width: 48px;
  height: 24px;
  background-color: ${e.getColorAlias("interactiveForm")};
  transition: background-color 0.4s linear;
  border-radius: ${o=>o.theme.radius.roundedC};
  svg {
    opacity: 0;
    position: absolute;
    fill: ${e.getColorAlias("interactiveBrand")};
    top: ${e.getSpacing("s01")};
    left: ${e.getSpacing("s01")};
  }
  &:before {
    position: absolute;
    content: '';
    top: 2px;
    left: 2px;
    height: 20px;
    width: 20px;
    background-color: ${e.getColorAlias("interactiveLight")};
    border-radius: ${o=>o.theme.radius.roundedE};
    box-shadow: ${o=>o.theme.elevation.e1};
    transition: 0.4s;
  }
`,n=r.default.input`
  opacity: 0;
  width: 0;
  height: 0;
  &:hover + ${t} {
    background-color: ${e.getDarkenColor("hover01","interactiveForm")};
  }
  &:focus + ${t} {
    background-color: ${e.getColorAlias("interactiveForm")};
  }
  &:active + ${t} {
    background-color: ${e.getDarkenColor("active01","interactiveForm")};
  }
  &:checked + ${t} {
    background-color: ${e.getColorAlias("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: ${e.getDarkenColor("hover01","interactiveBrand")};
      svg {
        fill: ${e.getDarkenColor("hover01","interactiveBrand")};
      }
    }
    &:active {
      background-color: ${e.getDarkenColor("active01","interactiveBrand")};
      svg {
        fill: ${e.getDarkenColor("active01","interactiveBrand")};
      }
    }
  }
  &:checked + ${t}:before {
    transform: translateX(24px);
  }
  &:disabled + ${t} {
    background-color: ${e.getColorAlias("disabled01")};
    cursor: not-allowed;
    svg {
      fill: ${e.getColorAlias("disabled01")};
    }
    &:before {
      background-color: ${e.getColorAlias("contentLight")};
    }
  }
  &:disabled:hover + ${t} {
    background-color: ${e.getColorAlias("disabled01")};
    svg {
      fill: ${e.getColorAlias("disabled01")};
    }
  }
`,s=r.default.span`
  ${e.getFontSize("size16")};
  color: ${e.getColorAlias("contentDefault")};
  margin-right: ${e.getSpacing("s02")};
  height: ${e.getSpacing("s05")};
  cursor: ${o=>o.disabled?"not-allowed":"pointer"};
`,c=r.default.label`
  display: flex;
  justify-content: center;
  align-items: center;
`;exports.ToggleInput=n;exports.ToggleLabel=s;exports.ToggleSlider=t;exports.ToggleWrapper=l;exports.Wrapper=c;
