@import 'src/styles/master';

.toggle {
  .checkbox {
    display: none;

    &:checked + label span {
      background: $colorInfoProfit;

      &:before {
        transform: translateX(space(5));
      }
    }
  }

  .label {
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .handle {
    position: relative;
    width: space(10);
    height: space(5);
    border-radius: space(4);
    box-shadow: inset 0 0 rem-calc(4) $alphaBlack40;
    background: $colorGreyLight;

    &:before {
      content: '';
      position: absolute;
    }

    &:before {
      left: 1px;
      top: 1px;
      width: space(4.5);
      height: space(4.5);
      background: $colorWhite;
      border-radius: 50%;
      z-index: 1;
      transition: transform 0.3s;
    }
  }
}
