.toggle__button {
  vertical-align: middle;
  user-select: none;
  cursor: pointer;
  & > div {
    display: inline-block;
  }
  input[type="checkbox"] {
    opacity: 0;
    position: absolute;
    width: 1px;
    height: 1px;
  }
  .toggle__switch {
    display: inline-block;
    height: 11px;
    border-radius: 10px;
    width: 24px;
    background: rgba(193, 193, 193, 0.39);
    position: relative;
    margin: 0 16px;
    transition: all 0.25s;
    &::after {
      content: "";
      position: absolute;
      display: block;
      width: 15px;
      height: 15px;
      border-radius: 50%;
      left: -5px;
      top: -2px;
      transform: translateX(0);
      transition: all 0.25s cubic-bezier(0.5, -0.6, 0.5, 1.6);
    }
    &::after {
      background: white;
      box-shadow: var(--box-shadow);
    }
  }
  &.active {
    .toggle__switch {
      box-shadow: var(--box-shadow);
      &::after {
        left: 0;
        background: var(--color-primary);
        box-shadow: 0 0 1px var(--color-primary);
        transform: translateX(24px - 8px);
      }
    }
    &.disabled {
      .toggle__switch {
        &::after {
          background-color: #95989a;
          border: none;
          box-shadow: none;
        }
      }
    }
  }
  &.disabled {
    cursor: default;
    span {
      color: var(--color-silver-dark);
    }
    .toggle__switch {
      &::after {
        border: 1px solid #95989a;
        box-shadow: none;
      }
    }
  }
}