@use "../../wc";

// Color icon palette
$colors: (
  red: var(--zn-color-red-500),
  blue: var(--zn-color-blue-500),
  orange: var(--zn-color-orange-500),
  yellow: var(--zn-color-yellow-400),
  indigo: var(--zn-color-indigo-500),
  violet: var(--zn-color-violet-500),
  green: var(--zn-color-green-500),
  pink: var(--zn-color-pink-500),
  gray: var(--zn-color-gray-500)
);

// Size spacing configuration
$sizes: (
  small: var(--zn-input-spacing-small),
  medium: var(--zn-input-spacing-medium),
  large: var(--zn-input-spacing-large)
);

// Mixin for icon spacing based on size
@mixin icon-spacing($size, $spacing) {
  :host([size="#{$size}"]) .select__icon {
    padding-inline-start: $spacing;
    margin-inline-end: $spacing;
  }
}

// Mixin for end-positioned icon spacing
@mixin icon-end-spacing($size, $spacing) {
  :host([size="#{$size}"]) .select__icon--end {
    padding-inline-start: 0;
    padding-inline-end: $spacing;
    margin-inline-end: 0;
    margin-inline-start: auto;
  }
}

// Mixin for combobox padding restoration
@mixin combobox-padding($condition, $size, $spacing) {
  :host([#{$condition}][size="#{$size}"]) zn-select::part(combobox) {
    padding-inline-start: $spacing !important;
  }
}

:host {
  display: block;
}

.color-icon {
  width: var(--zn-spacing-medium);
  height: var(--zn-spacing-medium);
  display: block;
  border-radius: var(--zn-border-radius-circle);
  flex-shrink: 0;

  @each $name, $color in $colors {
    &--#{"" + $name} {
      background-color: #{$color};
    }
  }
}

zn-select::part(listbox) {
  max-height: 300px;
}

.select__icon {
  font-size: var(--zn-font-size-x-large);
  line-height: 1;
  display: inline-flex;
  align-items: center;

  &:empty {
    display: none;
  }
}

@each $size, $spacing in $sizes {
  @include icon-spacing($size, $spacing);
  @include icon-end-spacing($size, $spacing);
  @include combobox-padding('icon-position="end"', $size, $spacing);
  @include combobox-padding('icon-position="start"][icon-empty', $size, $spacing);
}

:host(:not([size])) .select__icon {
  padding-inline-start: var(--zn-input-spacing-medium);
  margin-inline-end: var(--zn-input-spacing-medium);
}

:host(:not([size])) .select__icon--end {
  padding-inline-start: 0;
  padding-inline-end: var(--zn-input-spacing-medium);
  margin-inline-end: 0;
  margin-inline-start: auto;
}

:host([icon-position="end"]:not([size])) zn-select::part(combobox),
:host([icon-position="start"][icon-empty]:not([size])) zn-select::part(combobox) {
  padding-inline-start: var(--zn-input-spacing-medium) !important;
}