.toggle-container {
  width: 100%;

  .toggle-display-container {
    width: 100%;
    transition: all ease-in-out 0.3s;
    @include display-flex(flex-start);

    .toggle-display {
      width: 40px;
      height: 24px;
      border-radius: 100px;
      border: 2px solid $light-grey;
      background: $light-grey;
      transition: all ease-in-out 0.3s;
      @include display-flex(flex-start, center);
      cursor: pointer;

      .toggle-indicator {
        @include full-circle(20px);
        background: $white;
        transition: all ease-in-out 0.3s;
        position: relative;
        left: 0;
      }
    }

    .toggle-label {
      margin-left: 16px;

      &--boxed {
        margin-left: 0;
        margin-right: 16px;
      }
    }
  }

  &--boxed {
    .toggle-display-container {
      border: 1px solid $light-grey;
      background-color: white;
      @include display-flex();
      padding: 14px;
      border-radius: 6px;
    }

    &.active {
      .toggle-display-container {
        box-shadow: $popper-shadow;
        border-color: $primary;
      }
    }
  }

  &.active {
    .toggle-display {
      background: $primary;
      border-color: $primary;

      .toggle-indicator {
        left: calc(100% - 20px);
      }
    }
  }
}