/*
 * 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: 30002;
  position: relative;
}

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

  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;
      min-height: var(--xh-mobile-input-height-px);
    }

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

    &__single-value,
    &__input {
      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);
    }

    &__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);
      }
    }
  }
}

// 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 {
        background: none;
      }
    }
  }
}

//---------------
// Fullscreen
//---------------
#xh-select-input-fullscreen-portal {
  z-index: 22;

  .xh-select {
    margin: var(--xh-pad-px);

    &__fullscreen-wrapper {
      position: absolute !important;
      z-index: inherit;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: var(--xh-bg);
    }

    &__fullscreen-toolbar {
      background-color: var(--xh-appbar-bg);
      color: var(--xh-appbar-title-color);
      padding: var(--xh-pad-half-px) var(--xh-pad-px) var(--xh-pad-half-px) 0;

      & > span {
        font-size: var(--xh-appbar-title-font-size-px);
        flex: 1;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
      }

      .xh-button {
        background: transparent !important;
        color: var(--xh-appbar-title-color) !important;
      }
    }
  }
}