react-ions/lib/components/Toggle/style.scss

@import '../../styles/common/colors';

.toggle-component {
  align-items: center;
  display: inline-flex;
  margin: 0 -8px;
  padding: 0 8px;

  .toggle-wrapper {
    cursor: pointer;
    display: inline-flex;
    height: 20px;
    position: relative;
    width: 50px;

    &.no-text {
      width: 40px;

      .inner {
        right: 21px;
      }
    }

    .outer {
      background: $neutral-4;
      border-radius: 100px;
      bottom: 0;
      left: 0;
      right: 0;
      position: absolute;
      transition: background 0.15s ease-in;
      top: 0;

      &.on {
        background: $success;
      }
    }

    .inner {
      background: $white;
      border-radius: 50%;
      height: 16px;
      position: absolute;
      right: 31px;
      top: 1px;
      transition: background 0.15s ease-in, right 0.15s ease-out;
      width: 16px;
      box-shadow: 1px 0 2px 0 rgba(45,62,80,0.1);
      border: 1px solid $neutral-4;

      &.on {
        background: $white;
        right: 1px;
        border: 1px solid $success;
      }

      &.loading {
        background: transparent;
      }
    }

    .text {
      position: relative;
      color: $white;
      font-size: 12px;
      z-index: 1;
      left: 24px;
      font-weight: 500;
      top: 3px;
      user-select: none;

      &.on {
        left: 8px;
      }
    }

    &.toggle-disabled {
      cursor: not-allowed;

      .outer {
        background: $neutral-3;
      }
      .inner {
        border: 1px solid $neutral-3;
      }
    }
  }

  &.toggle-red {
    .outer.on {
      background: $danger;
    }
    .inner.on {
      border: 1px solid $danger;
    }
  }

  label {
    color: $primary-4;
    cursor: pointer;
    display: inline-block;
    margin-right: 5px;
    user-select: none;

    &.toggle-disabled {
      cursor: not-allowed;
    }
  }

  .toggle-loader {
    position: absolute;
    top: -2px;
    height: 20px;
    width: 20px;
    left: -2px;
  }
}