label.fwi-toggle {
  display: inline-flex;
  align-items: center;
  height: 2.8rem;
  font-size: $base_font_size;
  position: relative;
  border-radius: 4px;
  background-color: $grey_extra_light;
  margin-left: 10px;

  span {
    padding: 0 28px;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    pointer-events: none;
    border-radius: 4px;

    &:nth-child(1) {
      background: $purple;
      color: $white;
      box-shadow: 3px 0px 6px rgba(0, 0, 0, 0.23);
      z-index: 1;
    }

    &:nth-child(3) {
      background: $grey_extra_light;
      color: #778089;
      box-shadow: 3px 0px 6px white;
    }
  }

  &.checked {
    span {
      &:nth-child(1) {
        background: $grey_extra_light;
        color: #778089;
        box-shadow: 3px 0px 6px white;
      }

      &:nth-child(3) {
        background: $purple;
        color: $white;
        box-shadow: -3px 0px 6px rgba(0, 0, 0, 0.23);
        z-index: 1;
      }
    }
  }

  input[type='checkbox'] {
    position: absolute;
    z-index: 2;
    -webkit-appearance: none;
    width: 100%;
    height: 2.8rem;
    border-radius: 4px;
    left: -2px;
    @include focusable();

    &:focus {
      outline: none;
    }
  }
}
