@import '~tc-ui/src/styles/tc-includes';

:global {
  .SwitchButton {
    position: relative;
    display: flex;
    align-items: center;
    .label{
      width: 92px;
      line-height: 20px;
      font-size: 12px;
      @include roboto;
      color: $tc-gray-60;
    }
    label{
      display: flex;
      margin: 0;
      padding: 0;
      height: 20px;
      margin-top: 5px;
    }
    input[type="checkbox"] {
      max-height: 0;
      max-width: 0;
      opacity: 0;
      margin: 0;
      position: absolute;
      z-index:-1;
      &:checked + i:before {
        width: 35px;
        background: $tc-dark-blue-100;
      }
      &:checked + i:after {
        left: 18px;
      }
    }
    i {
      display: inline-block;
      position: relative;
      text-indent: 60px;
      height: 20px;
      width: 35px;
      border-radius: 10px;
      margin: 0;
      padding: 0;
      background: $tc-gray-40;
      &:before {
        content: "";
        position: absolute;
        display: block;
        height: 20px;
        width: 20px;
        top: 0;
        left: 0;
        border-radius: 10px;
        background: $tc-gray-40;
        -webkit-transition: .25s ease-in-out;
      }
      &:after {
        content: "";
        position: absolute;
        display: block;
        height: 14px;
        width: 14px;
        top: 3px;
        left: 3px;
        border-radius: 7px;
        background: $tc-white;
        cursor: pointer;
        -webkit-transition: .25s ease-in-out;
      }
    }
  }
}