@use '../base/token';
@use '../abstract';

.cds-dropdown {
  @include abstract.relative();
  display: inline-block;
  line-height: normal;

  // dropdown__list
  // ==============================
  &__list {
    @include abstract.absolute($top: 100%);
    width: max-content;
    border-radius: 8px;
    border: 1px solid var(--gray-100);
    background-color: var(--base-white);
    box-shadow: var(--shadow-lg);
    z-index: 5;
  } // list

  // dropdown__item
  &__item {
    padding: 6px;

    &:nth-child(n + 2) {
      border-top: 1px solid var(--gray-100);
    }
  } // item

  &__element {
    padding: 9px 10px;
    display: flex;
    align-items: center;
    gap: 8px;
    border-radius: 6px;
    color: var(--gray-500);
    background-color: var(--base-white);
    border: 0;
    font-size: token.$font-size-1;
    font-weight: abstract.font-weight-to-number(token.$font-weights-commerce-sans-1);
    cursor: pointer;

    [type='checkbox'] {
      width: 16px;
      height: 16px;
      border: 1px solid var(--gray-200);
    }

    svg {
      stroke: currentColor;
    }

    &:hover {
      background-color: var(--gray-50);
    }
  } // element

  // is-right는 기본값으로 따로 추가 하지 않음
  &.is-left &__list {
    right: 0;
  }

  &.is-open .has-arrow > svg {
    transform: rotate(180deg);
  }
}