/*
 * Segmented-control-specific utilities
 */

@mixin gl-btn-gl-segmented-button-first {
  box-shadow: inset 0 #{$gl-border-size-1} 0 0 $gray-200,
    inset 0 -#{$gl-border-size-1} 0 0 $gray-200, inset #{$gl-border-size-1} 0 0 0 $gray-200;
}

@mixin gl-btn-gl-segmented-button-last {
  box-shadow: inset 0 #{$gl-border-size-1} 0 0 $gray-200,
    inset 0 -#{$gl-border-size-1} 0 0 $gray-200, inset -#{$gl-border-size-1} 0 0 0 $gray-200;
}

@mixin gl-btn-gl-segmented-button-focus($color) {
  box-shadow: $focus-ring, inset 0 0 0 $gl-border-size-2 $color;
}

.btn-group.gl-segmented-control {
  .btn:not(:first-child),
  .btn:not(:last-child) {
    &.active,
    &.focus,
    &:hover:not(.disabled) {
      @include gl-rounded-base;
    }
  }
}

.gl-segmented-control {
  label:not(.disabled) {
    @include gl-cursor-pointer;
  }

  .btn-gl-segmented-button {
    @include gl-font-base;
    @include gl-line-height-normal;
    @include gl-text-gray-900;
    @include gl-fill-current-color;
    @include gl-bg-gray-10;
    @include gl-inset-border-y-1-gray-200;

    &:first-child {
      @include gl-btn-gl-segmented-button-first;
    }

    &:last-child {
      @include gl-btn-gl-segmented-button-last;
    }

    &:hover {
      @include gl-inset-border-2-gray-400;
      @include gl-bg-gray-50;
    }

    &.focus {
      @include gl-z-index-1;
      @include gl-btn-gl-segmented-button-focus($gray-400);
      @include gl-bg-gray-50;
    }

    &.active {
      @include gl-z-index-2;
      @include gl-inset-border-2-gray-300;
      @include gl-bg-white;

      &:hover {
        @include gl-inset-border-2-gray-400;
        @include gl-bg-gray-50;
      }

      &.focus,
      &.focus:hover {
        @include gl-btn-gl-segmented-button-focus($gray-400);
        @include gl-bg-gray-50;
      }
    }

    &:focus-within {
      @include gl-focus;
    }

    &.disabled,
    &[disabled],
    &.disabled:hover,
    &[disabled]:hover {
      @include gl-text-gray-400;
      @include gl-inset-border-y-1-gray-200;
      @include gl-z-index-0;
      @include gl-cursor-not-allowed;

      &:first-child {
        @include gl-btn-gl-segmented-button-first;
      }

      &:last-child {
        @include gl-btn-gl-segmented-button-last;
      }
    }
  }
}