@import "../../theme.scss";

html[dir="rtl"] {
  .select-root .select-button svg {
    left: 8px;
    right: auto;
  }
}

.select-root {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  max-width: 540px;

  .select-labelWrapper {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    max-width: 340px;

    .select-clearButton {
      background: unset;
      background-color: unset;
      border: unset;
      color: $secondary;
      font-size: 0.75rem;
      font-weight: 400;
      cursor: pointer;

      &:hover {
        color: $secondary-dark;
      }

      &:disabled {
        color: $text-disabled;
      }
    }
  }

  .select-buttonWrapper {
    position: relative;
    max-width: 340px;
    flex-grow: 1;
    width: 100%;
  }

  .select-button {
    border-radius: 6px;
    border: 1px solid #ddd;
    background: #fefefe;
    padding-inline: 10px 24px;
    font-size: 0.875rem;
    height: 42px;
    width: 100%;
    position: relative;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    text-align: start;

    svg {
      position: absolute;
      height: 100%;
      top: 0;
      right: 8px;
      width: 1em;
      display: inline-block;
      fill: $primary;
    }

    &.select-button--placeholder {
      color: $text-secondary;
    }

    &:disabled {
      opacity: 0.8;
      pointer-events: none;
      color: $text-disabled;

      svg {
        opacity: 0.8;
      }
    }

    &:hover {
      border-color: $secondary;
    }

    &:focus {
      box-shadow: 0 0 0 1px $secondary-light;
      border-color: $secondary;
    }
  }

  .select-optionsContainer {
    flex-grow: 1;
    width: 100%;
    z-index: 9999;
  }

  .select-optionsList {
    margin-block-start: 8px;
    margin-block-end: 8px;
    padding: 6px;
    background-color: #fefefe;
    border: 1px solid #ddd;
    box-shadow:
      rgba(0, 0, 0, 0.1) 0px 10px 15px -3px,
      rgba(0, 0, 0, 0.05) 0px 4px 6px -2px;
    display: flex;
    flex-direction: column;
    min-width: max-content;
    max-width: 340px;
    width: 100%;
    border-radius: $border-radius;
    max-height: 260px;
    overflow: auto;
  }
}