/* ----------------------------------------------
   File: MultiSelect.scss
   Place this in the same folder. This file contains styles only.
------------------------------------------------*/
@use "sass:map";
@use "sass:list";
@use "./functions.scss" as *;

$msd-bg: #fff;
$msd-border: #dcdfe4;
$msd-border-focus: #6b9cff;
$msd-text: #1f2937;
$msd-muted: #6b7280;
$msd-chip-bg: #f3f4f6;
$msd-chip-text: #111827;
$msd-chip-remove: #9ca3af;
$msd-chip-remove-hover: #4b5563;
$msd-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);

.msd {
  position: relative;
  color: $msd-text;
  &--disabled {
    opacity: 0.6;
    pointer-events: none;
    background-color: var(--_gray-100);
  }
}

.msd__control {
  position: relative; // anchor for ellipsis
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 40px;
  border: 1px solid var(--_gray-300);
  background: var(--_base-white);
  border-radius: 4px;
  padding: 6px 8px;
  cursor: text;
  transition:
    border-color 0.15s ease,
    box-shadow 0.15s ease;

  // &--open {
  //   box-shadow: $msd-shadow;
  //   border-color: lighten($msd-border, 5%);
  // }

  &:focus-within {
    border-color: var(--_gray-300);
    box-shadow: 0px 0px 0px 2px var(--_gray-100);
  }
}

.msd__chips {
  display: flex;
  align-items: center;
  flex-wrap: nowrap; // single line only
  overflow: hidden; // hide overflowed chips
  white-space: nowrap; // prevent wrapping
  gap: 6px;
  min-height: 28px;
  flex: 1 1 auto;
  .msd__chip {
    // ensure chips do not wrap individually
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 8px 5px 8px;
    background: $msd-chip-bg;
    border-radius: 999px;
    line-height: 1;
    border: 1px solid lighten($msd-border, 6%);
    transition:
      padding 0.2s ease,
      background-color 0.2s ease;
    .msd__chipRemove {
      border: 0;
      background: transparent;
      cursor: pointer;
      color: $msd-chip-remove;
      font-size: 14px;
      line-height: 1;
      padding: 0;
      margin: 0;
      svg {
        width: 10px;
        height: 10px;
      }
      &:hover {
        color: $msd-chip-remove-hover;
      }
    }
    &:hover {
      // border: 1px solid var(--_gray-300);
      background-color: var(--_base-white);
      // padding: 5px 10px;
      svg path {
        stroke: var(--_gray-900);
      }
    }
  }
  &--single {
    .msd__chip {
      background-color: transparent;
      border: none !important;
      border-radius: 0px !important;
      max-width: 270px;
      min-width: 150px;
    }
  }
}

.msd__chipLabel {
  font-size: 12px;
  color: $msd-chip-text;
  display: -webkit-box !important;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  line-clamp: 1;
  white-space: normal;
  word-break: break-all;
  overflow: hidden;
}

.msd__input {
  border: 0;
  outline: 0;
  flex: 0 0 auto;
  min-width: 100px; // keep single line
  max-width: 45%; // avoid pushing actions off-screen
  font-size: 14px;
  background: transparent;
  color: $msd-text;
  line-height: 19px;

  &::placeholder {
    color: $msd-muted;
  }
}
.msd__clear {
  margin-right: 15px;
  svg {
    width: 16px;
    height: 16px;
  }
}
.msd__clear,
.msd__arrow {
  width: 26px;
  // height: 26px;
  border: 0;
  background: transparent;
  cursor: pointer;
  font-size: 12px;
  color: $msd-muted;
  // padding: 4px 6px;
  border-radius: 4px;
  display: flex;
  // &:hover {
  //   color: #374151;
  // }
}

.msd__ellipsis {
  position: absolute;
  right: 30px; // leave room for the arrow
  top: 5px;
  // transform: translateY(-50%);
  pointer-events: none;
  background: $msd-bg;
  padding-left: 6px;
  width: 24px;
}

.msd__menu {
  position: absolute;
  z-index: 20;
  top: 99%;
  left: 0;
  right: 0;
  background: $msd-bg;
  border: 1px solid $msd-border;
  border-radius: 4px;
  box-shadow: $msd-shadow;
  overflow: auto;
  padding: 6px;
}

.msd__empty {
  padding: 10px;
  text-align: center;
  color: $msd-muted;
  font-size: 13px;
}

.msd__menu--up {
  top: auto;
  bottom: 100%;
}

.msd__option {
  // display: grid;
  // grid-template-columns: 16px 1fr;
  // align-items: center;
  gap: 10px;
  padding: 10px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  display: flex;
  justify-content: start;
  align-items: center;
  svg path {
    stroke: var(--_gray-50);
  }
  &__img {
    border-radius: 4px;
    justify-content: center;
    align-items: center;
    display: flex;
    width: 32px;
    height: 32px;
    border: 1px solid var(--_gray-200);
    overflow: hidden;
    img {
      max-height: 100%;
      max-width: 100%;
    }
  }
  .msd__option__text {
    display: flex;
    flex-direction: column;
    gap: 4px;
    span {
      &:first-of-type {
        display: -webkit-box !important;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 1;
        line-clamp: 1;
        white-space: normal;
        word-break: break-all;
        overflow: hidden;
      }
    }
    .msd__option__subtitle {
      font-size: 12px;
      color: var(--_gray-700);
    }
  }
  .is__selected {
    margin-left: auto;
  }

  &:not(.is-disabled):hover {
    // @include BgColorLighter(var(--_thm-cs-at-py), 8%);
    background-color: var(--_gray-50);
  }
  // &.is-active {
  //   background: #f1f5f9;
  // }
  &.is-selected {
    font-weight: normal;
    // @include BgColorLighter(var(--_thm-cs-at-py), 8%);
    background-color: var(--_gray-100);
    // color: var(--_thm-cs-at-py);
    color: var(--_gray-900);
    // background: var(--_thm-cs-at-py);
    svg path {
      // stroke: var(--_thm-cs-at-py);
      stroke: var(--_gray-900);
    }
    .msd__option__subtitle {
      color: var(--_gray-900);
    }
  }
  &.is-disabled {
    opacity: 0.5;
    pointer-events: none;
  }
  &--selectAll {
    font-weight: 600;
  }
  &:not(:last-child) {
    margin-bottom: 2px;
  }
}

.msd__checkbox {
  width: 16px;
  height: 16px;
  border-radius: 4px;
  border: 1.5px solid var(--_gray-600);
  background: #fff;
  position: relative;
  top: 2px;

  &.is-checked {
    border-color: var(--_gray-600);
    background: var(--_gray-600);
    &::after {
      content: "";
      position: absolute;
      top: 2px;
      inset: 0;
      background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path fill="white" d="M7.629 13.296L3.7 9.367l1.414-1.414 2.515 2.515L14.886 3.21l1.414 1.415z"/></svg>')
        center/12px 12px no-repeat;
    }
  }

  &.is-disabled {
    opacity: 0.6;
  }
}