'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

var styled = require('styled-components');
var index = require('../../utils/index.js');

function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }

var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);

const ToggleWrapper = styled__default['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 ${index.getColorAlias('focusOuter')};
  }
`;
const ToggleSlider = styled__default['default'].span `
  position: absolute;
  cursor: pointer;
  width: 48px;
  height: 24px;
  background-color: ${index.getColorAlias('interactiveForm')};
  transition: background-color 0.4s linear;
  border-radius: ${(props) => props.theme.radius.roundedC};
  svg {
    opacity: 0;
    position: absolute;
    fill: ${index.getColorAlias('interactiveBrand')};
    top: ${index.getSpacing('s01')};
    left: ${index.getSpacing('s01')};
  }
  &:before {
    position: absolute;
    content: '';
    top: 2px;
    left: 2px;
    height: 20px;
    width: 20px;
    background-color: ${index.getColorAlias('interactiveLight')};
    border-radius: ${(props) => props.theme.radius.roundedE};
    box-shadow: ${(props) => props.theme.elevation.e1};
    transition: 0.4s;
  }
`;
const ToggleInput = styled__default['default'].input `
  opacity: 0;
  width: 0;
  height: 0;
  &:hover + ${ToggleSlider} {
    background-color: ${index.getDarkenColor('hover01', 'interactiveForm')};
  }
  &:focus + ${ToggleSlider} {
    background-color: ${index.getColorAlias('interactiveForm')};
  }
  &:active + ${ToggleSlider} {
    background-color: ${index.getDarkenColor('active01', 'interactiveForm')};
  }
  &:checked + ${ToggleSlider} {
    background-color: ${index.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: ${index.getDarkenColor('hover01', 'interactiveBrand')};
      svg {
        fill: ${index.getDarkenColor('hover01', 'interactiveBrand')};
      }
    }
    &:active {
      background-color: ${index.getDarkenColor('active01', 'interactiveBrand')};
      svg {
        fill: ${index.getDarkenColor('active01', 'interactiveBrand')};
      }
    }
  }
  &:checked + ${ToggleSlider}:before {
    transform: translateX(24px);
  }
  &:disabled + ${ToggleSlider} {
    background-color: ${index.getColorAlias('disabled01')};
    cursor: not-allowed;
    svg {
      fill: ${index.getColorAlias('disabled01')};
    }
    &:before {
      background-color: ${index.getColorAlias('contentLight')};
    }
  }
  &:disabled:hover + ${ToggleSlider} {
    background-color: ${index.getColorAlias('disabled01')};
    svg {
      fill: ${index.getColorAlias('disabled01')};
    }
  }
`;
const ToggleLabel = styled__default['default'].span `
  ${index.getFontSize('size16')};
  color: ${index.getColorAlias('contentDefault')};
  margin-right: ${index.getSpacing('s02')};
  height: ${index.getSpacing('s05')};
  cursor: ${(props) => (props.disabled ? 'not-allowed' : 'pointer')};
`;
const Wrapper = styled__default['default'].label `
  display: flex;
  justify-content: center;
  align-items: center;
`;

exports.ToggleInput = ToggleInput;
exports.ToggleLabel = ToggleLabel;
exports.ToggleSlider = ToggleSlider;
exports.ToggleWrapper = ToggleWrapper;
exports.Wrapper = Wrapper;
