@use "../mixins/function.scss" as *;
@use "../mixins/mixins.scss" as *;

@include b(dropdown) {
  @include e(list) {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: getCssVar("shadow", "1");
    background-color: getCssVar("color", "bg-3");
    padding: 4px;
    transform-origin: left top;
    transition: all 0.3s getCssVar("bezier", "1");
    border-radius: getCssVar("radius", "medium");
  }
}

@include b(droption) {
  height: getCssVar("size", "medium");
  line-height: getCssVar("size", "medium");
  color: getCssVar("color", "text-1");
  margin-bottom: 4px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 8px;
  cursor: pointer;
  min-width: 80px;
  border-radius: calc(getCssVar("radius", "medium") - 1px);

  &:hover {
    color: getCssVar("color", "primary-6");
    background-color: getCssVar("color", "fill-2");
  }

  &:active {
    color: getCssVar("color", "primary-6");
    background-color: getCssVar("color", "fill-3");
  }

  &:last-child {
    margin-bottom: 0;
  }
  @include e(icon) {
    display: flex;
    align-items: center;
    justify-content: center;
  }
  @include e(title) {
    font-size: getCssVar("font-size", "medium");
    text-wrap: nowrap;
    flex: 1;
  }
  @include e(extra) {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 8px;
  }
}

@include b(dsubmenu) {
  margin-bottom: 4px;
  @include e(item) {
    height: getCssVar("size", "medium");
    line-height: getCssVar("size", "medium");
    color: getCssVar("color", "text-1");
    display: flex;
    align-items: center;
    padding: 0 8px;
    cursor: pointer;
    min-width: 80px;
    border-radius: calc(getCssVar("radius", "medium") - 1px);
    gap: 8px;

    &:hover {
      color: getCssVar("color", "primary-6");
      background-color: getCssVar("color", "fill-2");
    }

    &:active {
      color: getCssVar("color", "primary-6");
      background-color: getCssVar("color", "fill-3");
    }

    &:last-child {
      margin-bottom: 0;
    }
  }
  @include e(icon) {
    display: flex;
    align-items: center;
    justify-content: center;
  }
  @include e(title) {
    font-size: getCssVar("font-size", "medium");
    text-wrap: nowrap;
    flex: 1;
  }
  @include e(arrow) {
    display: flex;
    align-items: center;
    margin-left: 8px;
  }
  @include e(list) {
    position: fixed;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: getCssVar("shadow", "1");
    background-color: getCssVar("color", "bg-3");
    padding: 4px;
    transform-origin: left top;
    transition: all 0.3s getCssVar("bezier", "1");
    border-radius: getCssVar("radius", "medium");
  }
}