@use '../../scss/base/mixins' as *;
@use '../../scss/base/variables';

.container {
  display: grid;
  grid-template-columns: repeat(var(--options-length), auto);
  grid-gap: 4px;
  max-width: -webkit-fill-available;
  border: 1px solid var(--medium-purple);
  padding: 4px;
  color: var(--dark-purple);
  text-transform: uppercase;
  background: var(--white);
  border-radius: 4px;
  &.disabled {
    .button {
      cursor: not-allowed;
      color: var(--medium-gray);
      background: var(--white);
    }
  }
  &.errorBorder {
    border-color: var(--dark-red);
  }
}

.button {
  align-items: center;
  justify-content: center;
  display: flex;
  font-size: var(--font-size-12);
  cursor: pointer;
  padding: 4px 8px;
  position: relative;
  &.active {
    .picker {
      visibility: hidden;
      position: relative;
      z-index: 10;
    }
    &::before {
      border: 1px solid var(--dark-blue);
      font-weight: var(--font-weight-semibold);
      color: var(--white);
      background: var(--dark-blue);
      border-radius: 4px;
      position: absolute;
      content: attr(data-text);
      top: 0;
      left: 0;
      bottom: 0;
      right: 0;
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }
}

.exposedFilterVariant {
  @extend .container;
  // Override display from grid to inline-flex for exposed filter variant
  // Note: grid-template-columns from .container is inherited but unused here
  // since we're using flexbox layout instead of grid. The grid-template-columns
  // property is effectively ignored when display is set to inline-flex.
  display: inline-flex;
  padding: 8px;
  align-items: center;
  gap: 8px;
  box-sizing: border-box;
  height: 42px;

  // Disabled state for exposedFilterVariant - styles match base .container.disabled
  // but target .exposedFilterButton specifically to ensure proper application
  &.disabled {
    .exposedFilterButton {
      cursor: not-allowed;
      color: var(--medium-gray);
      background: var(--white);

      // Prevent hover effect when picker is disabled
      &:hover:not(.active) {
        background: var(--white);
      }
    }
  }

  .exposedFilterButton {
    @extend .button;
    padding: 4px 8px;
    gap: 4px;
    background: var(--white);
    border: 1px solid var(--medium-purple);
    color: var(--black);
    border-radius: 4px;
    text-align: center;
    font-weight: var(--font-weight-regular);
    line-height: 1.2;
    box-sizing: border-box;

    // Ensure .picker is always visible (not hidden like in base .button.active)
    &.active .picker {
      visibility: visible;
    }

    // Style the .picker span to reserve space for semibold width
    // Use a technique where we always reserve space for semibold text
    .picker {
      // Create a hidden semibold version that reserves the maximum width
      // This ensures consistent button width regardless of active state
      &::after {
        content: attr(data-text);
        font-weight: var(--font-weight-semibold);
        visibility: hidden;
        // Keep it in flow to reserve space, but make it not affect height
        display: block;
        line-height: 0;
      }
    }

    // Hover effect - disabled when button is disabled or when picker is disabled
    // (picker disabled state is handled in parent .exposedFilterVariant.disabled block)
    &:hover:not(.active):not(:disabled) {
      background: var(--light-gray);
    }

    &:focus-visible:not(.active) {
      outline: 2px solid var(--dark-blue);
      outline-offset: 2px;
      background: var(--light-gray);
    }

    &.active {
      background: var(--light-blue);
      border: 1px solid var(--light-blue);
      font-weight: var(--font-weight-semibold);

      &::before {
        display: none;
      }

      &:focus-visible {
        outline: 2px solid var(--dark-blue);
        outline-offset: 2px;
      }
    }
  }
}