@import "mixin";
.ws-state-select {
  @include no_select;
  width: 100%;
  max-width: 260px;
  position: relative;
  z-index: 0;
  &.active {
    z-index: 100;
    .ws-state-select__button {
      background-color: var(--v-inputBackground-base);
      &:before {
        border: solid 2px var(--v-appbarTitleActive-base);
      }
    }
  }
  &.round {
    .ws-state-select__button {
      &:before {
        border-radius: 8px;
      }
    }
  }
  &.is-error {
    .ws-state-select__button {
      &:before {
        border: solid 2px var(--v-alert-base);
      }
    }
  }
  &.is-disabled {
    pointer-events: none;
    .ws-state-select__button {
      background-color: #eee;
    }
  }
  .ws-state-select__button {
    @include flex;
    width: 100%;
    cursor: pointer;
    // background-color: #ffffff;
    height: 40px;
    padding: 9px 12px;
    position: relative;
    text-decoration: none;
    &:before {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: 0;
      border: solid 1px var(--v-inputBorder-base);
      background-color: transparent;
      box-shadow: 0 1px 2px 0 rgba(4, 48, 71, 0.06), 0 0 1px 0 rgba(4, 48, 71, 0.1);
      pointer-events: none;
    }
    .ws-state-select__button-text {
      @include text_ellipsis;
      width: 100%;
      font-size: 0.875rem;
      line-height: 1.43;
      letter-spacing: normal;
      color: var(--v-textPrimary-base);
    }
    .ws-state-select__placeholder {
      @include text_ellipsis;
      width: 100%;
      font-size: 0.875rem;
      line-height: 1.43;
      letter-spacing: normal;
      color: var(--v-textSecondary-base);
    }
    .icon {
      margin-left: 4px;
      color: var(--v-textSecondary-base);
    }
  }
  .ws-state-select__menu {
    border-radius: 8px;
    box-shadow: 0 16px 16px -2px rgba(4, 48, 71, 0.1), 0 0 1px 0 rgba(4, 48, 71, 0.1);
    background-color: var(--v-selectMenuBackground-base);
    width: 100%;
    position: absolute;
    z-index: 100;
    overflow: hidden;
    top: 45px;
    left: 0;
    .ws-state-select__search-input-section {
      width: 100%;
      height: 60px;
      padding: 10px 6px;
      .ws-state-select__search-input {
        width: 100%;
        height: 40px;
        position: relative;
        .icon {
          position: absolute;
          top: 9px;
          left: 11px;
          pointer-events: none;
          font-size: 1.25rem;
          color: var(--v-textSecondary-base);
        }
        input {
          @include placeholder(var(--v-textSecondary-base));
          width: 100%;
          padding: 6px 10px 6px 43px;
          color: var(--v-textPrimary-base);
          border-radius: 8px;
          font-size: 1rem;
          line-height: 1.5;
          border: solid 1px var(--v-inputBorder-base);
          background-color: transparent;
          outline: none;
          &:focus {
            border: solid 2px #56afdf;
            background-color: #ffffff;
          }
        }
        .search-input-clear-button {
          @include flex_center;
          position: absolute;
          padding: 9px 10px;
          z-index: 1;
          top: 0;
          right: 0;
          cursor: pointer;
          text-decoration: none;
          .clear-icon {
            font-size: 1.25rem;
            color: var(--v-textSecondary-base);
          }
        }
      }
    }
    .loading-section {
      @include flex_center;
      border-top: solid 1px var(--v-inputBorder-base);
      width: 100%;
      height: 40px;
    }
    .ws-state-select__options {
      width: 100%;
      // border-top: solid 1px var(--v-inputBorder-base);
      max-height: 300px;
      overflow: auto;
      a {
        @include flex;
        @include flex_align;
        padding: 14px 10px;
        text-decoration: none;
        background-color: var(--v-white-base);
        outline: none;
        &:hover {
          background-color: var(--v-dataTableExpandRow-base);
        }
        &:focus {
          background-color: var(--v-dataTableExpandRow-base);
        }
        .checkbox {
          @include flex_center;
          margin-right: 8px;
          i {
            color: var(--v-primary-base);
            font-size: 1.25rem;
          }
        }
        p {
          font-size: 0.875rem;
          line-height: 1.43;
          color: var(--v-textPrimary-base);
          margin-bottom: 0;
        }
      }
    }
    .no-result-text {
      border-top: solid 1px var(--v-inputBorder-base);
      padding: 14px 10px;
      p {
        font-size: 0.875rem;
        line-height: 1.43;
        color: var(--v-textSecondary-base);
        margin: 0;
      }
    }
  }
  // min-width: 120px;
  // &.round {
  //   .ws-state-select__button {
  //     border-radius: 8px;
  //   }
  // }
  // .ws-state-select__button {
  //   @include flex;
  //   @include ts;
  //   cursor: pointer;
  //   border-radius: 0;
  //   padding: 8px 12px;
  //   width: 100%;
  //   height: 40px;
  //   border: solid 1px var(--v-inputBorder-base);
  //   background-color: #ffffff;
  //   font-size: 0.875rem;
  //   line-height: 1.43;
  //   &:hover {
  //     box-shadow: 0 3px 3px -1px rgba(4, 48, 71, 0.06), 0 0 1px 0 rgba(4, 48, 71, 0.1);
  //   }
  //   &.active {
  //     .ws-state-select__input-icon {
  //       @include tf_ro(180deg);
  //     }
  //   }
  //   .ws-state-select__input-content {
  //     @include flex;
  //     @include flex_align;
  //     justify-content: flex-start;
  //     width: 100%;
  //   }
  //   .ws-state-select__input-icon {
  //     @include ts;
  //     margin-left: 4px;
  //   }
  // }
}

// .v-menu__content {
//   border-radius: 8px;
//   .v-list-item {
//     padding: 0 10px;
//     .v-list-item__title {
//       font-size: 0.875rem;
//       line-height: 1.43;
//     }
//   }
// }