@use "sass:list";
@use "sass:color";
@use "styles/library" as library;

$dropdown_bg: #FFFFFF;
$dropdown_border_color: oklch(0 0 0 / 20%);
$dropdown_hover: #F5F5F5;
$dropdown_selected: #FFF4F0;
$dropdown_accent: oklch(0.7086 0.1896 39.86);

$dropdown_dimension: (324px, 40px);
$dropdown_padding: (10px, 5px);
$dropdown_border_radius: 8px;

$dropdown_animation_timing: cubic-bezier(0.4, 0, 0.2, 1);
$dropdown_animation_duration: 0.2s;

:host {
  display: inline-block;
  position: relative;

  width: list.nth($dropdown_dimension, 1);
  padding: 0; margin: 0;

  background-color: $dropdown_bg;
  border-radius: $dropdown_border_radius;
  box-shadow: 0 0 0 1px $dropdown_border_color inset;
  outline: none;

  &:focus-visible {
    box-shadow: 0 0 0 1px $dropdown_border_color inset, 0 0 0 2px white, 0 0 0 4px $dropdown_accent;
  }
}

.dropdown-box {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: list.nth($dropdown_padding, 2) list.nth($dropdown_padding, 1);
  height: list.nth($dropdown_dimension, 2) - list.nth($dropdown_padding, 2) * 2;

  border-radius: $dropdown_border_radius;
  transition: library.append-transition((border-color, box-shadow), $dropdown_animation_duration $dropdown_animation_timing);
  gap: 8px;

  .prefix-icon {
    width: 24px;
    height: 24px;
    user-select: none;
  }

  .placeholder {
    white-space: nowrap;
    text-overflow: ellipsis;
    margin-right: auto;

    font-size: 18px;
  }

  .chevron {
    width: 24px;
    height: 24px;
    transition: transform $dropdown_animation_duration $dropdown_animation_timing;
    user-select: none;

    &.open {
      transform: rotate(180deg);
    }
  }
}

.dropdown-list {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  width: 100%;
  padding: 0;
  margin: 0;
  list-style: none;
  background-color: $dropdown_bg;
  border-radius: $dropdown_border_radius;
  z-index: 1000;
  max-height: 200px;
  overflow-y: auto;
  animation: slideIn $dropdown_animation_duration $dropdown_animation_timing;

  &::after {
    display: inline-block;

    content: "";
    box-shadow: 0 0 0 1px $dropdown_border_color inset;
    pointer-events: none;
    z-index: 1001;

    position: absolute;
    top: 0; left: 0; bottom: 0; right: 0;
    border-radius: $dropdown_border_radius;
  }

  @keyframes slideIn {
    from {
      opacity: 0;
      transform: translateY(-8px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
}

.dropdown-item {
  display: flex;
  align-items: center;
  height: 40px;
  padding: 0 16px;
  transition: background-color $dropdown_animation_duration $dropdown_animation_timing;

  &:hover, &.focused {
    background-color: $dropdown_hover;
  }

  &.selected {
    background-color: $dropdown_selected;
    color: $dropdown_accent;
    font-weight: 600;
  }
}