@use './variables' as vars;
@use './mixins' as mix;

.mdc-list-item--disabled {
  --select-option-color--hover: transparent;

  .mdc-list-item__primary-text {
    opacity: 0.6 !important;
    --mat-list-list-item-disabled-label-text-color: var(--font-color) !important;
  }
}

.mat-mdc-select-panel {
  --mat-select-panel-background-color: var(--select-option-color);

  .mat-mdc-option {
    .mdc-list-item {
      &__primary-text {
        text-overflow: ellipsis;
        overflow: hidden;
      }
    }
  }
}

.mat-mdc-select-panel {
  --mat-theme-text-primary-on-background: var(--font-color);
}

.cdk-overlay-pane {

  &:has(.select-panel--fit-content) {
    min-width: fit-content;
  }
}

.mdc-menu-surface {
  &.mat-mdc-select-panel {
    padding: 6px !important;
    width: auto !important;
  }
}

.mat-mdc-select {
  --mat-select-trigger-text-weight: 500;
  --mat-select-trigger-text-line-height: 0;
  --mat-select-trigger-text-tracking: 0px;

  &[aria-expanded="true"] {
    .mat-mdc-select-arrow {
      transform: rotate(180deg) !important;
    }
  }

  .mat-mdc-select-value {
    color: var(--font-color);
    line-height: 24px;
  }

  .mat-mdc-select-arrow, .mat-mdc-select-placeholder {
    color: var(--select-placeholder-color);
  }

  .mat-mdc-select-trigger {
    height: auto;

    .mat-mdc-select-arrow-wrapper {
      transform: none;
      margin-left: 5px;
      visibility: var(--select-arrow-wrapper-visibility, visible);
    }

    .mat-mdc-select-arrow {
      transition: all .2s;

      svg {
        color: var(--color-light-350);
        width: 20px;
        height: 20px;
      }
    }
  }
}

.gm-select {
  --mat-select-trigger-text-size: 15px;
  --mat-typography-body1-line-height: auto;

  box-sizing: border-box;
  background: transparent;
  border: none;
  display: block !important;

  &:hover {
    &.gm-select {
      border: none;
    }
  }

  &:focus {
    .mat-mdc-select-arrow-wrapper{
      svg {
        color: var(--field-border-color-input--focus);
      }
    }

    &.gm-select {
      border: none;
    }
  }

  .mat-mdc-select-trigger {
    padding: var(--gm-select-trigger-padding-mobile, 12px 20px);

    @include mix.tablet {
      padding: var(--gm-select-trigger-padding, 14px 20px);
    }
  }

  &--emptyOptions {
    --select-arrow-wrapper-visibility: hidden;
    pointer-events: none;
  }

  &-label {
    padding-right: 6px;
    font-size: 15px;
    line-height: 18px;
  }

  &-icon {
    margin-right: 10px !important;
  }

  &-pane {
    --mat-option-label-text-size: 15px;

    &.gm-select-panel-below {
      padding-top: 10px;
      padding-bottom: 10px;
    }

    &.gm-select-panel-above {
      align-items: end;

      padding-top: 10px;
      padding-bottom: 10px;
    }
  }

  &-panel {
    --mat-option-focus-state-layer-color: var(--select-option-color--hover);
    --mat-option-selected-state-layer-color: var(--select-option-color--active);
    --mat-option-selected-state-label-text-color: var(--font-color);
    --mat-theme-primary: var(--font-color);

    display: flex;
    flex-direction: column;
    height: fit-content;

    overflow: auto;
    box-sizing: border-box;
    min-width: 100% !important;
    background: var(--select-option-color) !important;
    border: 1px solid var(--select-options-border-color) !important;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05) !important;
    border-radius: 8px !important;
    outline: none;
    max-height: 100% !important;
    min-height: 46px;

    .hide-checkbox mat-pseudo-checkbox {
      display: none;
    }

    &::-webkit-scrollbar {
      width: 0.5em;
    }

    &::-webkit-scrollbar-thumb {
      background-color: var(--select-options-scrollbar-color);
    }

    &::-webkit-scrollbar-track {
      background-color: transparent;
    }

    .mdc-list-item {
      --mat-list-list-item-hover-label-text-color: var(--font-color) !important;
    }

    .mat-pseudo-checkbox {
      border: 1px solid !important;
      color: var(--checkbox-border-color) !important;
      border-radius: 6px !important;

      width: 24px !important;
      height: 24px !important;

      &-minimal {
        display: none;
      }

      &-checked {
        background: var(--checkbox-color--checked) !important;
        position: relative;

        &::after {
          content: "";
          filter: invert(1);
          position: absolute !important;
          width: 20px !important;
          height: 20px !important;
          display: inline-block !important;
          background: url('../assets/svg/check.svg') 0 0 no-repeat !important;
          border: 0 !important;
          transform: scale(0.8) !important;

          left: 1px !important;
          top: 1px !important;
        }
      }
    }
  }

  &-trigger {
    display: flex;
    align-items: center;
  }

  &-suffix {
    display: flex;
    align-items: center;
    min-width: 100px;
    cursor: pointer;
    gap: 10px;
  }

  &-option {
    background: var(--select-option-color);

    &:hover {
      background: var(--select-option-color--hover) !important;
    }

    &.mat-option-disabled {
      background-color: var(--link-color) !important;
    }

    .mat-option-text {
      display: flex;
      align-items: center;
      color: var(--font-color);
      font-size: 15px;
    }

    &.mat-active {
      background: transparent;
    }

    .mat-icon.gm-icon[class*="p-r-"] {
      margin: 0;
    }
  }

  .mat-select-trigger, .mat-select-value {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0;
    height: inherit;
  }

  // select width border
  &.gm-select--bordered {
    border-radius: 10px;
    border: 1px solid var(--select-border-color);

    .mat-mdc-select-trigger {
      padding: var(--gm-select-bordered-trigger-padding, 12px 20px 12px 20px) !important;
    }

    &:focus, &:hover {
      &.gm-select {
        border: 1px solid var(--select-border-color--hover);
      }
    }
  }

  // select no border and transparent background
  &--transparent {
    background: transparent;
    border: none;

    &:hover {
      &.gm-select {
        background: transparent;
        border: none;
      }
    }

    &:focus {
      &.gm-select {
        background: transparent;
        border: none;
      }
    }
  }
}

.mat-mdc-option {
  background: var(--select-option-color);
  line-height: 22px;
  border-radius: 4px !important;

  &:hover {
    background: var(--select-option-color--hover) !important;
  }

  .mdc-list-item {
    display: block;

    &__primary-text {
      color: var(--font-color);
      padding-top: 5px;
      padding-bottom: 5px;
    }
  }

  &.mdc-list-item--selected {
    background-color: var(--select-option-color--active) !important;
  }

  .mat-mdc-option-text {
    display: flex;
    align-items: center;
  }
}