@use "sass:color";
@use "sass:map";
@use "colors";

// Variables
$tag-padding: (
  default: 0.25rem 0.625rem,
  large: 0.375rem 0.75rem,
  small: 0.125rem 0.375rem
);

$tag-font-size: (
  default: 0.75rem,
  large: 0.875rem,
  small: 0.6875rem
);

// Mixins
@mixin form-element-base {
  background-color: var(--pico-form-element-background-color) !important;
  border: var(--pico-border-width) solid var(--pico-form-element-border-color) !important;
  border-radius: var(--pico-border-radius) !important;
  padding: var(--pico-form-element-spacing-vertical) var(--pico-form-element-spacing-horizontal) !important;
  box-shadow: none !important;
  outline: none !important;
}

@mixin focus-state {
  border-color: var(--pico-primary) !important;
  box-shadow: 0 0 0 var(--pico-outline-width) var(--pico-primary-focus) !important;
}

@mixin hover-transition {
  transition: background-color var(--pico-transition) !important;
}

// Base styles
.selectize-input {
  @include form-element-base;
  font-size: var(--pico-font-size) !important;
  line-height: var(--pico-line-height) !important;
  transition: border-color var(--pico-transition), box-shadow var(--pico-transition) !important;

  &:focus {
    @include focus-state;
  }

  > input {
    color: var(--pico-color) !important;
  }
}

// Tag styles
.selectize-input > .item {
  display: inline-flex;
  align-items: center;
  background-color: rgba(map.get(colors.$palette, info), 0.1) !important;
  color: map.get(colors.$palette, info) !important;
  border-radius: 4px;
  gap: 0.25rem;
  font-size: map.get($tag-font-size, default);
  font-weight: 500;
  line-height: 1.125;
  padding: map.get($tag-padding, default);
  @include hover-transition;

  a {
    color: var(--pico-primary) !important;
    text-decoration: none;
    
    &:hover {
      color: var(--pico-primary-hover) !important;
      text-decoration: underline;
    }
  }

  &:hover {
    background-color: rgba(map.get(colors.$palette, info), 0.15) !important;
  }

  &.tag-large {
    padding: map.get($tag-padding, large);
    font-size: map.get($tag-font-size, large);
  }

  &.tag-small {
    padding: map.get($tag-padding, small);
    font-size: map.get($tag-font-size, small);
  }
}

// Dropdown styles
.selectize-dropdown {
  @include form-element-base;
  box-shadow: var(--pico-card-box-shadow) !important;
  margin-top: 0.25rem !important;
  z-index: 50 !important;
  padding: 0 !important;

  .selectize-dropdown-content {
    max-height: 300px !important;
    overflow-y: auto !important;
    padding: 0.5rem 0 !important;

    .option {
      padding: var(--pico-form-element-spacing-vertical) var(--pico-form-element-spacing-horizontal) !important;
      color: var(--pico-muted-color) !important;
      cursor: pointer !important;
      @include hover-transition;
      border: none !important;
      background: none !important;

      &:hover, &.active {
        background-color: var(--pico-primary-hover) !important;
        color: var(--pico-primary-inverse) !important;
      }

      &.selected {
        background-color: var(--pico-primary) !important;
        color: var(--pico-primary-inverse) !important;
      }
    }

    .create {
      padding: var(--pico-form-element-spacing-vertical) var(--pico-form-element-spacing-horizontal) !important;
      cursor: pointer !important;
      @include hover-transition;
      background-color: var(--pico-form-element-background-color) !important;
      color: var(--pico-color) !important;
      border: none !important;
    }
  }
}