@use 'sass:map';
@use '../base/colors';
@use '../base/typography';
@use '../base/opacity';
@use '../layout/utils' as utils;

@mixin mx-select-theme($theme) {
  $is-dark: map.get($theme, is-dark);
  $color-theme: colors.$mx-light;

  @if $is-dark == true {
    $color-theme: colors.$mx-dark;
  }

  .mat-mdc-select-disabled {
    .mx-select-trigger__additional-selection {
      color: rgba(map.get($color-theme, onSurface), opacity.$opacity-38);
    }
  }
  .mx-select-trigger__additional-selection {
    color: map.get($color-theme, onSurfaceVariant);
  }
  .mat-mdc-select-arrow {
    color: map.get($color-theme, onSurfaceVariant);
  }
  .mat-mdc-form-field .mat-mdc-select.mat-mdc-select-disabled .mat-mdc-select-arrow {
    color: rgba(map.get($color-theme, onSurfaceVariant), opacity.$opacity-38);
  }
  .mat-mdc-form-field .mat-mdc-select.mat-mdc-select-invalid .mat-mdc-select-arrow.mat-mdc-select-arrow {
    color: map.get($color-theme, error);
  }
  .mat-mdc-text-field-wrapper:has(mat-select[readonly]) {
    background-color: rgba(map.get($color-theme, onSurface), 0.04);
    .mat-mdc-select-arrow {
      color: rgba(map.get($color-theme, onSurfaceVariant), opacity.$opacity-38);
    }
  }
  .mat-pseudo-checkbox-full {
    color: map.get($color-theme, onSurface);
  }
  .mat-mdc-select-panel {
    @include mat-select-option-style($color-theme);
  }
}

@mixin mat-select-option-style($theme) {
  .mat-mdc-option.mdc-list-item--selected:not(.mdc-list-item--disabled) {
    &:not(.mat-mdc-option-multiple) {
      background-color: map.get($theme, secondaryContainer);
      &:hover {
        &::before {
          position: absolute;
          box-sizing: border-box;
          width: 100%;
          height: 100%;
          top: 0;
          left: 0;
          content: '';
          pointer-events: none;
          background-color: map.get($theme, onSurface);
          opacity: opacity.$opacity-8;
        }
      }
    }
    .mdc-list-item__primary-text {
      color: map.get($theme, onSurface);
    }
  }
}
.mat-mdc-select-value {
  @extend .gl-body-lg;
}

/* mx-select-trigger */
.mx-select-trigger__additional-selection {
  @extend .gl-body-sm;
  margin-left: 4px;
}

/* mx-select-readonly */
.mx-select-readonly__panel {
  display: none !important;
}

.mx-select-image-option {
  .mdc-list-item__primary-text {
    display: inline-flex;
    align-items: center;
  }

  &__image {
    margin-right: 8px;
    width: 40px;
    height: 40px;
  }

  &__text {
    display: flex;
    flex-direction: column;
  }

  &__title {
    margin: 0;
    @extend .gl-body-lg;
  }

  &__desc {
    @extend .gl-body-sm;
  }
}

.mdc-list-item__primary-text {
  @extend .gl-ellipsis-text;
  width: 100%;
}