import styled from "styled-components";
export const Toggle = styled.div `
  position: relative;
  width: 59px;
  height: 32px;
  background: #ccdae9;
  border-radius: 90px;
  transition: 200ms ease-out;
  cursor: pointer;
  &:before {
    background: #ffffff;
    border-radius: 90px;
    content: " ";
    position: absolute;
    left: 2px;
    top: 50%;
    transform: translateY(-50%);
    transition: 200ms ease-out;
    z-index: 5;
    width: 28px;
    height: 28px;
  }
  &:after {
    content: "";
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    width: 11px;
    height: 8px;
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    background-image: url("data:image/svg+xml,%3Csvg width='12' height='10' viewBox='0 0 12 10' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M11.3097 0.894805C11.6242 1.16437 11.6606 1.63785 11.391 1.95234L5.12395 9.26393L0.698592 5.57613C0.380384 5.31095 0.337391 4.83803 0.602564 4.51982C0.867737 4.20161 1.34066 4.15862 1.65887 4.42379L4.94779 7.16456L10.2521 0.976153C10.5217 0.661659 10.9952 0.625238 11.3097 0.894805Z' fill='white'/%3E%3C/svg%3E%0A");
  }
  ${(props) => props.active
    ? `
        background: #3897F9;
        &:before {
          left: calc(100% - 2px); transform: translate(-100%, -50%);
        }
  `
    : ``}

  ${(props) => props.sm
    ? `
        width: 45px;
        height: 24px;
        &:before {
          width: 20px;
          height: 20px;
        }
        &:after {
          left: 6px;
        }
  `
    : ``}
`;
//# sourceMappingURL=toggle.js.map