@use "../variables";
@use "input-fields";

/* Select Field
   ========================================================================== */

select.browser-default { opacity: 1; }
select {
  opacity: 0;
  background-color: variables.$select-background;
  width: 100%;
  padding: variables.$select-padding;
  border: variables.$select-border;
  border-radius: variables.$select-radius;
  height: variables.$input-height;
}

.select-label {
  position: absolute;
}

.select-wrapper {
  &.valid .helper-text[data-success],
  &.invalid ~ .helper-text[data-error] {
    @extend %hidden-text !optional;
  }

  &.valid {
    & > input.select-dropdown {
      @extend %valid-input-style !optional;
    }

    & ~ .helper-text:after {
      @extend %custom-success-message !optional;
    }
  }

  &.invalid {
    & > input.select-dropdown,
    & > input.select-dropdown:focus {
      @extend %invalid-input-style !optional;
    }

    & ~ .helper-text:after {
      @extend %custom-error-message !optional;
    }
  }

  &.valid + label,
  &.invalid + label {
    width: 100%;
    pointer-events: none;
  }

  & + label:after {
    @extend %input-after-style !optional;
  }

  position: relative;

  input.select-dropdown {
    &:focus {
      border-bottom: 1px solid variables.$input-focus-color;
    }
    position: relative;
    cursor: pointer;
    background-color: transparent;
    border: none;
    border-bottom: variables.$input-border;
    outline: none;
    height: variables.$input-height;
    line-height: variables.$input-height;
    width: 100%;
    font-size: variables.$input-font-size;
    margin: variables.$input-margin;
    padding: 0;
    display: block;
    user-select:none;
    z-index: 1;
  }

  .caret {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto 0;
    z-index: 0;
    fill: var(--mm-text-primary, rgba(0,0,0,.87));
  }

  & + label {
    position: absolute;
    top: -26px;
    font-size: variables.$label-font-size;
  }

  // Hide select with overflow hidden instead of using display none
  // (this prevents form validation errors with hidden form elements)
  .hide-select {
    width: 0;
    height: 0;
    overflow: hidden;
    position: absolute;
    top: 0;
    z-index: -1;
  }
}

// Disabled styles
select:disabled {
  color: variables.$input-disabled-color;
}

.select-wrapper.disabled {
  + label {
    color: variables.$input-disabled-color;
  }
  .caret {
    fill: variables.$input-disabled-color;
  }
}

.select-wrapper input.select-dropdown:disabled {
  color: variables.$input-disabled-color;
  cursor: default;
  user-select: none;
}

.select-wrapper i {
  color: var(--mm-text-primary, rgba(0,0,0,.87))
}

.select-dropdown li.disabled,
.select-dropdown li.disabled > span,
.select-dropdown li.optgroup {
  color: var(--mm-text-disabled, variables.$select-disabled-color);
  background-color: transparent;
}

body.keyboard-focused {
  .select-dropdown.dropdown-content li:focus {
    background-color: var(--mm-dropdown-focus, variables.$select-option-focus);
  }
}

.select-dropdown.dropdown-content {
  // Set a reasonable default max-height to prevent overly tall dropdowns
  max-height: 400px;
  overflow-y: auto;

  li {
    &:hover {
      background-color: var(--mm-dropdown-hover, variables.$select-option-hover);
    }

    &.selected {
      background-color: var(--mm-row-hover, variables.$select-option-hover);
    }
  }
}

// Prefix Icons
.prefix ~ .select-wrapper {
  margin-left: 3rem;
  width: 92%;
  width: calc(100% - 3rem);
}

.prefix ~ label { margin-left: 3rem; }

// Icons
.select-dropdown li {
  img {
    height: variables.$dropdown-item-height - 10;
    width: variables.$dropdown-item-height - 10;
    margin: 5px 15px;
    float: right;
  }
}

// Optgroup styles
.select-dropdown li.optgroup {
  border-top: 1px solid var(--mm-border-color, variables.$dropdown-hover-bg-color);

  &.selected > span {
    color: var(--mm-text-secondary, rgba(0, 0, 0, .7));
  }

  & > span {
    color: var(--mm-text-hint, rgba(0, 0, 0, .4));
  }

  & ~ li.optgroup-option {
    padding-left: 1rem;
  }
}

/* Dark theme overrides to ensure proper colors */
[data-theme="dark"] {
  .select-dropdown.dropdown-content li:hover,
  .dropdown-content li:hover,
  .dropdown-content li.active {
    background-color: #444 !important;
  }

  .chip {
    background-color: #424242 !important;
    color: var(--mm-text-secondary) !important;
  }
}

/* Auto dark mode support */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    .select-dropdown.dropdown-content li:hover,
    .dropdown-content li:hover,
    .dropdown-content li.active {
      background-color: #444 !important;
    }

    .chip {
      background-color: #424242 !important;
      color: var(--mm-text-secondary) !important;
    }
  }
}

/* SearchSelect Specific Styles
   ========================================================================== */

// Search input wrapper
.search-wrapper {
  padding: 0 16px;
  position: relative;
  // Removed border-bottom that was causing extra divider
}

// Search input field
.search-select-input {
  width: 100%;
  outline: none;
  font-size: 0.875rem;
  border: none;
  padding: 8px 0;
  border-bottom: 1px solid var(--mm-input-border, #9e9e9e);
  background-color: transparent;
  color: var(--mm-text-primary, inherit);

  &:focus {
    border-bottom-color: var(--mm-primary-color, #2196F3);
  }

  &::placeholder {
    color: var(--mm-text-hint, #9e9e9e);
  }
}

// No options found message
.search-select-no-options {
  padding: 8px 16px;
  color: var(--mm-text-hint, #9e9e9e);
  font-style: italic;
  text-align: center;
  border-bottom: none;

  &:hover {
    background-color: transparent;
    cursor: default;
  }
}

// Option labels for proper checkbox accessibility
.search-select-option-label {
  display: flex;
  align-items: center;
  width: 100%;
  cursor: pointer;
  padding: 0;
  margin: 0;
  // Ensure it inherits the same padding as regular dropdown items
  min-height: var(--mm-dropdown-item-height, 50px);

  input[type="checkbox"] {
    margin-right: 8px;
    position: relative;
    // Reset any default checkbox styles
    appearance: none;
    width: 18px;
    height: 18px;
    border: 2px solid var(--mm-border-color, #9e9e9e);
    border-radius: 2px;
    background-color: transparent;

    &:checked {
      background-color: var(--mm-primary-color, #2196F3);
      border-color: var(--mm-primary-color, #2196F3);

      &:after {
        content: '✓';
        color: white;
        font-size: 12px;
        position: absolute;
        top: -2px;
        left: 2px;
      }
    }

    &:focus {
      outline: 2px solid var(--mm-primary-color, #2196F3);
      outline-offset: 2px;
    }
  }

  span {
    flex: 1;
  }
}

// Multi-select chips styling improvements
.multi-select-dropdown {
  .chips-container {
    display: flex;
    align-items: flex-end;
    flex-wrap: wrap;
    cursor: pointer;
    position: relative;
    min-height: var(--mm-input-height, 3rem);
    padding: 4px 0;

    .chip {
      margin: 2px 4px 2px 0;
      // Let existing chip system handle background colors for theme compatibility

      .material-icons.close {
        cursor: pointer;
        font-size: 16px;
        margin-left: 4px;

        &:hover {
          color: var(--mm-error-color, #f44336);
        }
      }
    }

    .placeholder {
      color: var(--mm-text-hint, #9e9e9e);
      flex-grow: 1;
      padding: 8px 0;
    }

    .spacer {
      flex-grow: 1;
    }

    .caret {
      margin-left: auto;
      cursor: pointer;
    }
  }
}