@use '@angular/material' as mat;
@use '../core/tokens/token-utils';
@use '../core/tokens/m2/mtx/select' as tokens-mtx-select;

$_tokens: tokens-mtx-select.$prefix, tokens-mtx-select.get-token-slots();

@mixin rtl {
  @at-root [dir='rtl'] #{&} {
    @content;
  }
}

.ng-select {
  @include token-utils.use-tokens($_tokens...) {
    $filled-padding-top: var(--mat-form-field-filled-with-label-container-padding-top);
    $filled-padding-bottom: var(--mat-form-field-filled-with-label-container-padding-bottom);
    $vertical-padding: var(--mat-form-field-container-vertical-padding);

    padding: $filled-padding-top 16px $filled-padding-bottom;
    margin: calc($filled-padding-top * -1) -16px calc($filled-padding-bottom * -1);

    .mdc-text-field--outlined &,
    .mdc-text-field--no-label & {
      padding-top: $vertical-padding;
      padding-bottom: $vertical-padding;
      margin-top: calc($vertical-padding * -1);
      margin-bottom: calc($vertical-padding * -1);
    }

    .ng-select-container {
      align-items: center;

      @include token-utils.create-token-slot(color, container-text-color);

      .ng-value-container {
        align-items: center;

        .ng-input>input {
          padding: 0;
          color: inherit;
          font: inherit;
        }
      }

      .ng-clear-wrapper {
        width: 24px;
        text-align: center;
      }
    }

    .ng-placeholder {
      transition: opacity 200ms;
      opacity: 1;

      @include token-utils.create-token-slot(color, placeholder-text-color);

      .mat-form-field-hide-placeholder & {
        opacity: 0;
      }
    }

    .ng-has-value .ng-placeholder {
      display: none;
    }

    .ng-clear-wrapper {
      @include token-utils.create-token-slot(color, clear-icon-color);

      &:hover .ng-clear {
        @include token-utils.create-token-slot(color, clear-icon-hover-color);
      }
    }

    &.ng-select-disabled {
      .ng-value {
        @include token-utils.create-token-slot(color, disabled-text-color);
      }
    }

    &.ng-select-opened {
      .ng-arrow-wrapper .ng-arrow {
        top: -2px;
        border-width: 0 5px 5px;
      }
    }

    &.ng-select-single {
      &.ng-select-filtered .ng-placeholder {
        display: initial;
        visibility: hidden;
      }
    }

    &.ng-select-multiple {
      .ng-select-container .ng-value-container .ng-value {
        margin: 2px 4px 2px 0;
        border-radius: 16px;
        font-size: .875em;
        line-height: 18px;

        @include token-utils.create-token-slot(background-color, multiple-value-background-color);

        $border-color: token-utils.get-token-variable(multiple-value-outline-color);

        border: 1px solid $border-color;

        @include rtl {
          margin-right: auto;
          margin-left: 4px;
        }

        &.ng-value-disabled {
          opacity: .4;
        }

        .ng-value-label {
          display: inline-block;
          margin: 0 8px;
        }

        .ng-value-icon {
          display: inline-block;
          width: 18px;
          height: 18px;
          border-radius: 100%;
          text-align: center;

          &.left {
            margin-right: -4px;

            @include rtl {
              margin-left: -4px;
              margin-right: auto;
            }
          }

          &.right {
            margin-left: -4px;

            @include rtl {
              margin-right: -4px;
              margin-left: auto;
            }
          }

          &:hover {
            @include token-utils.create-token-slot(background-color, multiple-value-icon-hover-background-color);
          }
        }
      }
    }

    .ng-arrow-wrapper {
      width: 10px;
    }

    $enabled-arrow-color: token-utils.get-token-variable(enabled-arrow-color);
    $disabled-arrow-color: token-utils.get-token-variable(disabled-arrow-color);
    $invalid-arrow-color: token-utils.get-token-variable(invalid-arrow-color);

    .ng-arrow {
      border-width: 5px 5px 2px;
      border-style: solid;
      border-color: $enabled-arrow-color transparent transparent;
    }

    &.ng-select-disabled .ng-arrow {
      border-color: $disabled-arrow-color transparent transparent;
    }

    &.ng-select-invalid .ng-arrow {
      border-color: $invalid-arrow-color transparent transparent;
    }

    &.ng-select-opened .ng-arrow {
      border-color: transparent transparent $enabled-arrow-color;
    }

    &.ng-select-opened.ng-select-invalid .ng-arrow {
      border-color: transparent transparent $invalid-arrow-color;
    }
  }
}

.ng-dropdown-panel {
  @include token-utils.use-tokens($_tokens...) {
    @include token-utils.create-token-slot(background-color, panel-background-color);

    &.ng-select-bottom {
      top: 100%;

      @include token-utils.create-token-slot(border-bottom-left-radius, container-shape);
      @include token-utils.create-token-slot(border-bottom-right-radius, container-shape);
      @include token-utils.create-token-slot(box-shadow, container-elevation-shadow);
    }

    &.ng-select-top {
      bottom: 100%;

      @include token-utils.create-token-slot(border-top-left-radius, container-shape);
      @include token-utils.create-token-slot(border-top-right-radius, container-shape);
      @include token-utils.create-token-slot(box-shadow, container-elevation-shadow);
    }

    .ng-dropdown-header,
    .ng-dropdown-footer {
      padding: 14px 16px;
    }

    $border-color: token-utils.get-token-variable(panel-divider-color);

    .ng-dropdown-header {
      border-bottom: 1px solid $border-color;
    }

    .ng-dropdown-footer {
      border-top: 1px solid $border-color;
    }

    .ng-dropdown-panel-items {
      .ng-optgroup {
        padding: 14px 16px;
        font-weight: 500;
        user-select: none;
        cursor: pointer;

        @include token-utils.create-token-slot(color, optgroup-label-text-color);

        &.ng-option-disabled {
          cursor: default;
        }

        &.ng-option-marked {
          @include token-utils.create-token-slot(background-color, option-hover-state-background-color);
        }

        &.ng-option-selected {
          @include token-utils.create-token-slot(background-color, option-selected-state-background-color);
          @include token-utils.create-token-slot(color, option-selected-state-text-color);
        }
      }

      .ng-option {
        position: relative;
        padding: 14px 16px;
        text-overflow: ellipsis;
        text-decoration: none;
        text-align: left;
        white-space: nowrap;
        overflow: hidden;

        @include token-utils.create-token-slot(color, option-label-text-color);

        &.ng-option-marked {
          @include token-utils.create-token-slot(background-color, option-hover-state-background-color);
        }

        &.ng-option-selected {
          @include token-utils.create-token-slot(background-color, option-selected-state-background-color);
          @include token-utils.create-token-slot(color, option-selected-state-text-color);
        }

        &.ng-option-disabled {
          @include token-utils.create-token-slot(color, option-disabled-state-text-color);
        }

        @include rtl {
          text-align: right;
        }

        &.ng-option-child {
          padding-left: 32px;

          @include rtl {
            padding-right: 32px;
            padding-left: 0;
          }
        }

        .ng-tag-label {
          margin-right: 6px;
          font-size: 80%;

          @include rtl {
            margin-left: 6px;
            margin-right: 0;
          }
        }
      }
    }
  }
}