// =============================================================================
// FORM SELECT MULTIPLE
// Native select[multiple] styling
// =============================================================================

@use "sass:color";

select[multiple] {
  // Basic styling
  padding: 8px;
  border: 1px solid #cacaca;
  border-radius: 4px;
  background-color: #fefefe;
  font-size: 1rem;
  line-height: 1.6;
  transition: all 0.2s ease;

  // Remove default styling
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;

  // Scrollbar styling for webkit browsers
  &::-webkit-scrollbar {
    width: 10px;
  }

  &::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 4px;
  }

  &::-webkit-scrollbar-thumb {
    background: #b8b8b8;
    border-radius: 4px;

    &:hover {
      background: #999;
    }
  }

  // Focus state with primary color
  &:focus {
    outline: none;
    border-color: rgba($primary-color, 0.6);
    box-shadow: 0 0 0 3px rgba($primary-color, 0.15);
    background-color: #fff;
  }

  // Hover state
  &:hover {
    border-color: rgba($primary-color, 0.4);
    background-color: #fcfcfc;
  }

  // Option styling
  option {
    padding: 8px 12px;
    font-size: 1rem;
    line-height: 1.6;
    border-bottom: 1px solid #f0f0f0;
    transition: all 0.15s ease;

    // Selected state with lighter primary color
    &:checked {
      background: linear-gradient(0deg,
        rgba($primary-color, 0.85) 0%,
        rgba($primary-color, 0.85) 100%);
      color: white;
      font-weight: 500;
    }

    // Hover state
    &:hover:not(:checked) {
      background-color: rgba($primary-color, 0.08);
      color: color.adjust($primary-color, $lightness: -10%);
    }

    // Disabled state
    &:disabled {
      color: #999;
      background-color: #f5f5f5;
      cursor: not-allowed;
    }
  }

  // Disabled state for select
  &:disabled {
    background-color: #e6e6e6;
    cursor: not-allowed;
    opacity: 0.6;

    option {
      cursor: not-allowed;
    }
  }

  // Size variations
  &.small {
    font-size: 0.9rem;
    padding: 6px;

    option {
      padding: 6px 10px;
      font-size: 0.9rem;
    }
  }

  &.large {
    font-size: 1.1rem;
    padding: 10px;

    option {
      padding: 10px 14px;
      font-size: 1.1rem;
    }
  }
}

// Firefox specific adjustments
@-moz-document url-prefix() {
  select[multiple] option:checked {
    background-color: rgba($primary-color, 0.85) !important;
    color: white !important;
  }
}
