/*
 * This file belongs to Hoist, an application development toolkit
 * developed by Extremely Heavy Industries (www.xh.io | info@xh.io)
 *
 * Copyright © 2026 Extremely Heavy Industries Inc.
 */

.xh-segmented-control {
  .bp6-segmented-control {
    background-color: var(--xh-segmented-control-bg);
    border-radius: var(--xh-segmented-control-border-radius-px);
    padding: var(--xh-segmented-control-pad-px);
    gap: var(--xh-segmented-control-pad-px);

    // Constrain buttons to fit within a standard toolbar without growing it.
    // Toolbar (min-size - padding - border) minus tray padding on each side.
    // prettier-ignore
    --seg-btn-h: calc(var(--xh-tbar-min-size-px) - var(--xh-pad-half-px) * 2 - var(--xh-segmented-control-pad-px) * 2 - 1px);

    > .bp6-button {
      min-height: var(--seg-btn-h);
      max-height: var(--seg-btn-h);
    }

    // Selected option - solid button standing out from the tray.
    > .bp6-button:not(.bp6-minimal) {
      border-radius: var(--xh-segmented-control-border-radius-px);
      background-color: var(--xh-segmented-control-selected-bg);
      color: var(--xh-segmented-control-selected-text-color);
    }

    // Unselected options - minimal buttons receding into the tray.
    > .bp6-button.bp6-minimal {
      color: var(--xh-segmented-control-text-color);
    }

    // Per-option intents - colors keyed off the className applied to each button. Renders the
    // selected option as a solid fill in the intent color, and tints unselected options' text
    // so an intent (e.g. danger) reads as such even before it is chosen.
    @each $intent in (primary, success, warning, danger) {
      > .bp6-button.xh-segmented-control-option--#{$intent} {
        &.bp6-minimal {
          color: var(--xh-intent-#{$intent}-text-color);
        }

        &:not(.bp6-minimal) {
          background-color: var(--xh-intent-#{$intent});
          color: var(--xh-white);

          &:hover {
            background-color: var(--xh-intent-#{$intent}-darker);
          }

          &:active {
            background-color: var(--xh-intent-#{$intent}-darkest);
          }
        }
      }
    }
  }

  // Outlined mode - border around control tray with no inner background.
  &--outlined .bp6-segmented-control {
    background-color: transparent;
    border: 1px solid var(--xh-border-color);
  }

  @each $intent in (primary, success, warning, danger) {
    &--outlined#{&}--#{$intent} .bp6-segmented-control {
      border-color: var(--xh-intent-#{$intent});
    }
  }

  // Compact mode - reduced sizing for toolbars and space-constrained contexts.
  &--compact .bp6-segmented-control {
    padding: 0;
    gap: 0;

    > .bp6-button {
      min-height: var(--xh-tbar-compact-item-height-px);
      max-height: var(--xh-tbar-compact-item-height-px);
      font-size: var(--xh-tbar-compact-font-size-px);
      padding: 0 var(--xh-pad-half-px);

      > svg:not(:last-child) {
        margin-right: 4px;
      }
    }
  }

  // Compact + outlined - shrink buttons to account for the border.
  &--compact#{&}--outlined .bp6-segmented-control > .bp6-button {
    --compact-btn-h: calc(var(--xh-tbar-compact-item-height-px) - 2px);
    min-height: var(--compact-btn-h);
    max-height: var(--compact-btn-h);
  }

  // Validation borders
  &.xh-input--invalid .bp6-segmented-control {
    border: var(--xh-form-field-invalid-border);
  }

  &.xh-input--warning .bp6-segmented-control {
    border: var(--xh-form-field-warning-border);
  }

  &.xh-input--info .bp6-segmented-control {
    border: var(--xh-form-field-info-border);
  }
}