/*
 * 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.
 */

// Host div for Select option menu portal.
#xh-select-input-portal {
  z-index: 999;
  position: absolute;
}

.xh-select {
  // Outer div of the actual react-select control, causing it to fill its box.
  > div {
    width: 100%;
  }

  color: var(--xh-input-text-color);

  // This ".xh-select" is the prefix for nested BEM values below, not itself a level of nesting.
  .xh-select {
    &__control {
      background: var(--xh-input-bg);
      border: none;
      box-shadow: var(--xh-form-field-box-shadow);
      min-height: 30px;

      &--is-disabled {
        background-color: var(--xh-input-disabled-bg);

        .xh-select__placeholder {
          color: var(--xh-input-disabled-text-color);
        }
      }

      &--is-focused {
        box-shadow: var(--xh-form-field-focused-box-shadow);
      }

      &__left-icon {
        color: var(--xh-text-color-muted);
        display: inherit;
        font-size: var(--xh-font-size-large-px);
        margin-left: 7px;
        width: var(--xh-font-size-large-px);
      }
    }

    &__placeholder {
      color: var(--xh-input-placeholder-text-color);
    }

    &__single-value,
    &__input {
      color: var(--xh-input-text-color);

      &--is-disabled {
        color: var(--xh-input-disabled-text-color);
      }
    }

    &__value-container input {
      opacity: 1 !important;
      // Avoid unexpected scrollbar within input when using a custom font-face.
      line-height: 15px;
    }

    &__input-container {
      color: var(--xh-input-text-color);
    }

    &__indicators > div {
      display: flex;
      align-items: flex-end;
    }

    &__indicator {
      padding: 0 8px 0 0;
      width: 20px;
      color: var(--xh-text-color-muted);
      font-size: var(--xh-font-size-large-px);

      &:hover {
        cursor: pointer;
        color: var(--xh-text-color);
      }
    }

    &__indicator-separator {
      background-color: var(--xh-border-color);
    }

    &__multi-value {
      background-color: var(--xh-bg-alt);

      &__label {
        color: var(--xh-text-color);
      }

      &__remove {
        color: var(--xh-text-color-muted);
      }

      &--is-disabled {
        .xh-select__multi-value__label {
          color: var(--xh-input-disabled-text-color);
        }
      }
    }

    &__tooltip {
      &__target {
        // Required to override tooltip styling applied by Blueprint, which was breaking the
        // react-select styles that elide overly-long values.
        display: inherit;
      }
    }
  }
}

.xh-select--has-height {
  > div {
    height: 100%;
  }

  // This ".xh-select" is the prefix for nested BEM values below, not itself a level of nesting.
  .xh-select {
    &__control {
      height: 100%;

      &__left-icon {
        height: 100%;
        padding-top: 7px;
      }
    }

    &__placeholder {
      height: 100%;
      padding-top: var(--xh-pad-half-px);
    }

    &__value-container {
      align-content: flex-start;
      margin: 1px;
      height: calc(100% - 2px);
      overflow-y: auto !important;
    }

    &__indicators {
      position: absolute;
      top: var(--xh-pad-half-px);
      right: var(--xh-pad-half-px);
      flex-direction: column;
    }
  }
}

// The menu is rendered under the xh-app body, not within the control DOM.
.xh-app {
  .xh-select {
    &__menu {
      background-color: var(--xh-bg);
      box-shadow: 0 0 0 1px var(--xh-form-field-box-shadow-color-top);
    }

    &__option {
      // Suppress the padding added by react-select on the option wrapper
      padding: 0;

      > * {
        // Default padding for the inner option element
        padding: var(--xh-pad-px);
      }

      &--is-selected {
        // Suppress default highlighting - checkmark indicate selection.
        color: var(--xh-text-color);
        background: none;
      }

      &--is-focused {
        color: var(--xh-text-color-highlight);
        background: var(--xh-bg-alt);
      }
    }
  }
}

// Ensure multi-value selects don't overflow vertically in the toolbar
.xh-toolbar {
  .xh-select {
    &__value-container--is-multi {
      height: 28px;
      overflow-y: auto !important;
      line-height: 1.2; // Ensure the line-height does not cause the scrollbar to appear
    }
  }
}