@use '../theme.scss' as *;

$itemHeight: 37px;
$selectBoxVerticalPadding: $verticalInputPadding;
$selectBoxCompactVerticalPadding: $compactVerticalPadding;

.be-select-box {
  --radius: #{$baseInputRadius};
  &.round {
    --radius: 2em;
  }
  position: relative;
  font-size: 1em;
  border-radius: var(--radius);
  display: flex;
  flex-direction: column;
  .selected-item {
    position: relative;
    display: inline-flex;
    .default-text {
      padding: $inputPadding;
      line-height: $inputLineHeight;
      border: 1px solid var(--brd);
      background-color: var(--bgc);
      border-radius: var(--radius);
      max-width: 100%;
      width: 100%;
      min-width: 205px;
      color: #33333388;
      &.has {
        color: #333;
      }
    }
    & > i.icon {
      position: absolute;
      height: 2em;
      width: 2em;
      text-align: center;
      opacity: 0.5;
      top: 50%;
      right: 0;
      transform: translate(-5px, -50%);
      z-index: 10;
      &:before {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
      }
    }
  }
  &.show,
  &.open {
    .selected-item,
    select + i.icon {
      i.icon {
        transform: translate(-5px, -50%) rotate(180deg);
      }
    }
    .select-menu {
      display: inline-block;
      // transform: translateY(0);
      opacity: 1;
    }
  }
  &.multiple {
    .selected-list {
      padding: $compactVerticalPadding;
      max-width: 200px;
      display: flex;
      gap: 5px;
    }
  }
  .select-menu {
    display: none;
    position: absolute;
    background-color: var(--bgc);
    z-index: 999;
    border: 1px solid var(--brd);
    border-radius: var(--radius);
    transition: all 250ms ease;
    transition-delay: 250ms;
    transform: translateY(-10px);
    opacity: 0;
    //.option-item.selected {
    //  background-color: #eff4fc;
    //}
    .option-item.icon {
      display: block;
      i {
        font-size: 0.9em;
        margin-right: 10px;
      }
    }
  }
  &.spinner {
    min-width: 12em;
    .spinner-control {
      padding: $selectBoxVerticalPadding;
      &.left {
        order: -1;
        border-right: 1px solid #d6d6d6;
      }
      &.right {
        border-left: 1px solid #d6d6d6;
      }
    }
    &.right {
      .spinner-control.left {
        order: 0;
        border: 0;
        border-left: 1px solid #d6d6d6;
      }
    }
  }
  &.dropdown {
    .select-menu {
      top: 100%;
      left: 0;
      width: 100%;
      padding: 12px 0;
      margin: 0 -1px;
      box-shadow: 2px 5px 5px rgba(0, 0, 0, 0.16);
      margin: 8px 0;
      .option-item {
        max-height: $itemHeight;
        cursor: pointer;
      }
    }
    &.open .select-menu {
      display: inline-block;
      box-shadow: 2px 5px 5px rgba(0, 0, 0, 0.16);
    }
  }
  &.float {
    .select-menu {
      top: 0;
      left: 0;
      width: 100%;
      .option-item {
        max-height: $itemHeight;
        cursor: pointer;
      }
    }
    &.open .select-menu {
      display: inline-block;
      box-shadow: 2px 5px 5px rgba(0, 0, 0, 0.16);
    }
  }
  &.fluid {
    width: 100%;
    .selected-item {
      width: 100%;
    }
  }
  &.disabled {
    .default-text {
      background-color: var(--suf);
      border-color: var(--brd);
      opacity: 0.5;
    }
    pointer-events: none;
  }
  select {
    font-size: 1em;
    width: 100%;
    color: var(--txt);
    background: var(--bgc);
    border: 1px solid var(--brd);
    border-radius: var(--radius);
    padding: $inputPadding;
    padding-right: 2.25em;
    appearance: none;
    outline: 0;
    line-height: $inputLineHeight;
    //opacity: 0.5;
    option {
      font-size: 1rem;
      //position: absolute;
      //appearance: none;
    }
    &:hover {
      border-color: #c0c4cc;
    }
    & + i.icon {
      top: 50%;
      transform: translate(-5px, -50%);
      opacity: 0.5;
    }
  }
  &.compact {
    .selected-item input,
    .selected-item .default-text,
    select {
      padding: $compactPadding;
    }
    i {
      padding: $selectBoxCompactVerticalPadding;
    }
  }
}

.be-popper {
  &.select-menu {
    padding: 0.5rem;
    .option-item {
      height: $itemHeight;
      padding: 10px;
      max-height: $itemHeight;
      border-radius: var(--radius);
      cursor: pointer;
      &.icon {
        display: block;
        i {
          font-size: 0.9em;
          margin-right: 10px;
        }
      }
    }
  }
}