@import "../../scss/utilities/index";

.mat-mdc-select {
  &, &.form-field__select, {
    @extend .select;

    .mat-mdc-select-arrow {
      border-left: 0;
      border-right: 0;
    }

    .mat-mdc-select-arrow-wrapper {
      width: calc-rem(16px);
      display: unset;
      vertical-align: auto;
      transform: none;
      padding-top: 0.375rem;

      opacity: 1 !important;
      background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTIiIGhlaWdodD0iOCIgdmlld0JveD0iMCAwIDEyIDgiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGQ9Ik02IDcuNDEwMTZMMCAxLjQxMDE2TDEuNDEgMC4wMDAxNTY0MDNMNiA0LjU4MDE2TDEwLjU5IDAuMDAwMTU2NDAzTDEyIDEuNDEwMTZMNiA3LjQxMDE2WiIgZmlsbD0iIzZCNkQ3MyIvPgo8L3N2Zz4K);
      background-size: calc-rem(12px 7.41px);
      background-position: right center;
      background-repeat: no-repeat;

      .mat-mdc-select-arrow {
        display: none;
      }
    }

    .mat-mdc-select-placeholder {
      @include fontSize($font-size-md);
    }

    &-panel.mdc-menu-surface {
      box-shadow: 0 0 15px rgba(#6b6d73, 0.24);
    }

    &.mat-mdc-select-disabled {
      background-color: var(--color-white-opacity-05);
      border-color: var(--color-gray-300);
    }
  }
}

.mat-form-field-underline {
  display: none;
}

.form-field--invalid {
  .mat-mdc-form-field .mat-mdc-select,
  .form-field__select.ng-select .ng-select-container {
    @extend .form-field--invalid;
  }
}

.cdk-overlay-backdrop.cdk-overlay-backdrop-showing.cdk-overlay-transparent-backdrop {
  opacity: 1;
}

.wide-select {
  min-width: calc-rem(240px);

  .mat-mdc-option {
    @include fontSize(12px);
  }
}

.mat-mdc-select-search-input {
  color: var(--color-black) !important;
}

/**
* #@ng-select
*/
.form-field__select.ng-select {
  .ng-select-container,
  [class*="form-field__select ng-select"] .ng-select-container {
    @extend .select;

    &:hover {
      box-shadow: unset;
    }
  }

  &.ng-select-disabled > .ng-select-container {
    background-color: var(--color-white-opacity-05);
    border-color: var(--color-gray-300);
  }

  .mdc-checkbox {
    box-sizing: unset;
  }

  .ng-clear-wrapper {
    width: calc-rem(24px);
    height: calc-rem(24px);
    text-align: center;

    .ng-clear {
      @include fontSize(24px);

      color: var(--color-gray-500);
      font-weight: $font-weight-semibold;
    }
  }

  &.ng-select-focused:not(.ng-select-opened) > .ng-select-container {
    border-color: var(--color-brand-dark);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 0 2px rgb(50 95 218 / 10%);
  }

  &.ng-select-typeahead.ng-select-opened .ng-value {
    color: var(--color-gray-400);
  }

  &.ng-select-multiple .ng-select-container .ng-value-container {
    &, .ng-input {
      padding: 0;
    }
  }

  &.ng-select-single .ng-select-container .ng-value-container .ng-input {
    top: .5rem;
  }

  &, &.ng-select-multiple .ng-select-container .ng-value-container {
    .ng-placeholder {
      @include fontSize($font-size-md);

      top: unset;
      padding-bottom: unset;
      padding-left: unset;
    }
  }

  .ng-select-container .ng-value-container {
    padding-left: 0;

    .ng-placeholder {
      color: var(--mat-select-placeholder-text-color)
    }
  }

  &.ng-select-single .ng-select-container {
    height: unset;
  }

  .ng-arrow-wrapper, &.ng-select-opened > .ng-select-container {
    .ng-arrow {
      border-width: 0;
      border-color: unset;
      width: calc-rem(12px);
      height: calc-rem(12px);
      background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTIiIGhlaWdodD0iOCIgdmlld0JveD0iMCAwIDEyIDgiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGQ9Ik02IDcuNDEwMTZMMCAxLjQxMDE2TDEuNDEgMC4wMDAxNTY0MDNMNiA0LjU4MDE2TDEwLjU5IDAuMDAwMTU2NDAzTDEyIDEuNDEwMTZMNiA3LjQxMDE2WiIgZmlsbD0iIzZCNkQ3MyIvPgo8L3N2Zz4K);
      background-size: 0.75rem 1rem;
    }
  }

  &.ng-select-opened > .ng-select-container .ng-arrow {
    transform: scaleY(-1);
    background-size: 0.75rem 0.6rem;
    height: 0.6rem;
  }
}

.form-field__select.ng-dropdown-panel, .form-field__select.ng-select .ng-dropdown-panel {
  box-shadow: $box-shadow-default;
  border: unset;

  &.ng-select-bottom {
    margin-top: 0;
  }

  .ng-dropdown-panel-items {
    .ng-optgroup {
      color: inherit;
      font-weight: inherit;
    }

    .ng-option.ng-option-child {
      padding-left: 10px;
    }

    .ng-option,
    .ng-optgroup.ng-option-marked {
      &.ng-option-selected,
      &.ng-option-selected.ng-option-marked,
      &.ng-optgroup.ng-option-marked,
      &.ng-option-marked {
        background-color: var(--color-gray-100);
        color: var(--color-brand-dark);

        .ng-option-label {
          font-weight: $font-weight-regular;
        }
      }
    }
  }
}