.sui-a-form-options-group {
  overflow: auto;
  display: flex;
  max-width: 100%;

  &.as--inline {
    display: inline-flex;
    margin-right: $sui-space-lg;
  }

  label {
    position: relative;
    z-index: 2;
    width: auto;
    min-width: 0;
    display: flex;
    flex: none;

    &:hover {
      cursor: pointer;
    }
  }

  input {
    position: absolute;
    z-index: -1;
    opacity: 0;
  }

  &__label {
    background-color: $sui-color-brand-denim-100;
    position: relative;
    text-align: center;
    padding: $sui-space-xs - rem(1) $sui-space-md $sui-space-xs + rem(1) $sui-space-md; // Move content 1px upward (for checked hyphen)
    width: auto;
    min-width: 0;
    max-width: 100%;
    border: $sui-size-border solid $sui-color-brand-denim-400;
    transition: 0.1s;
  }

  label + label &__label {
    border-left: none;
  }

  label:first-child &__label {
    border-top-left-radius: $sui-border-radius-md;
    border-bottom-left-radius: $sui-border-radius-md;
  }

  label:last-child &__label {
    border-top-right-radius: $sui-border-radius-md;
    border-bottom-right-radius: $sui-border-radius-md;
  }

  label:not(:first-child) input:checked ~ &__label {
    box-shadow: rem(-1) 0 0 0 darken($sui-color-primary, 10%);
  }

  input:checked ~ &__label {
    border-color: darken($sui-color-primary, 10%);
    background-color: $sui-color-primary;
    color: $sui-color-brand-denim-100;
  }

  input:checked ~ &__label::after {
    content: '';
    position: absolute;
    bottom: rem(4);
    left: 50%;
    transform: translateX(rem(-6));
    width: rem(12);
    height: rem(2);
    background-color: $sui-color-brand-denim-100;
    border-radius: $sui-border-radius-rounded;
  }

  // -------------------------
  // Type light
  // -------------------------
  input:checked ~ &__label.as--light {
    border-color: $sui-color-border;
    background-color: $sui-color-brand-denim-300;
    color: #263d5c;
  }

  input:checked ~ &__label.as--light::after {
    background-color: $sui-color-brand-denim-700;
  }

  label:not(:first-child) input:checked ~ &__label.as--light {
    box-shadow: none;
  }

  // -------------------------
  // Disabled
  // -------------------------

  label input:disabled ~ &__label {
    opacity: .5;
    cursor: not-allowed;
  }

  // -------------------------
  // Hover
  // -------------------------
  label input:not(:disabled):not(:checked) ~ &__label:hover {
    border-color: $sui-color-primary;
  }

  label:not(:first-child) input:not(:disabled):not(:checked) ~ &__label:hover {
    &::before {
      content: '';
      position: absolute;
      top: 0;
      left: -$sui-size-border;
      bottom: 0;
      width: $sui-size-border;
      background: $sui-color-primary;
    }
  }

  // -------------------------
  //    Focus
  // -------------------------
  label:first-child input:not(:disabled):checked:focus ~ &__label {
    box-shadow: inset 0 0 rem(3) rem(2) rgba($sui-color-brand-denim-300, 0.5);
  }

  label:not(:first-child) input:not(:disabled):checked:focus ~ &__label {
    box-shadow: rem(-1) 0 0 0 darken($sui-color-primary, 10%), inset 0 0 rem(3) rem(2) rgba($sui-color-brand-denim-300, 0.5);
  }

  label input:not(:disabled):not(:checked):focus ~ &__label {
    box-shadow: inset 0 0 rem(3) rem(2) rgba($sui-color-primary, 0.5);
  }
}