@use '@angular/material' as mat;

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

.ng-select {
  padding-top: calc(.4375em + .84375em);
  margin-top: calc(-.4375em - .84375em);
  padding-bottom: .4375em;
  margin-bottom: -.4375em;

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

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

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

  .ng-placeholder {
    .mat-form-field-has-label & {
      transition: opacity 200ms;
      opacity: 0;
    }

    .mat-form-field-has-label .mtx-select-floating & {
      opacity: 1;
    }
  }

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

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

  &.ng-select-single {
    // vertical align with material form field
    &.ng-select-filtered {
      .ng-placeholder {
        display: initial;
        visibility: hidden;
      }
    }

    .ng-select-container {
      .ng-value-container {
        // vertical align with material form field
        .ng-placeholder,
        .ng-value {
          &::after {
            display: inline-block;
            content: '';
          }
        }
      }
    }
  }

  &.ng-select-multiple {
    .ng-select-container {
      .ng-value-container {
        margin: -4px 0;

        .ng-value {
          margin: 4px;
          border-radius: 16px;
          font-size: .875em;
          line-height: 18px;

          .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;
              }
            }
          }
        }
      }
    }
  }

  .ng-clear-wrapper {
    height: 18px;
    text-align: center;
  }

  .ng-arrow-wrapper {
    width: 18px;

    .ng-arrow {
      border-width: 5px 5px 2px;
      border-style: solid;
    }
  }
}

.ng-dropdown-panel {
  left: 0;

  @include rtl {
    right: 0;
    left: auto;
  }

  &.ng-select-bottom {
    top: 100%;
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;

    @include mat.elevation(4);
  }

  &.ng-select-top {
    bottom: 100%;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;

    @include mat.elevation(4);
  }

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

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

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

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

      @include rtl {
        text-align: right;
      }

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

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

      .ng-tag-label {
        padding-right: 5px;
        font-size: 80%;
        font-weight: 400;

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