@import "../../styles/settings/settings.colors";
@import "../../styles/tools/tools.all";

mat-form-field.chips {
  $chips-background-color: $ash;
  $chips-background-color-hover: $ash;
  $chips-color: $white;
  $chips-border-radius: 0.75rem;
  $chips-height: 1.5rem;
  $delete-icon-background-color: $empress;
  $delete-icon-background-color-hover: $coal;
  $delete-icon-color: $white;
  $delete-icon-size: 0.75rem;
  $icon-container-size: 1rem;

  .mat-form-field-outline {
    background: $white;
  }

  .mat-form-field-outline-start,
  .mat-form-field-outline-end {
    border-color: $ash;
    border-radius: 0;
  }

  .mat-form-field-flex {
    padding: 0 0.5rem;

    &:hover {
      .mat-form-field-outline-start,
      .mat-form-field-outline-end {
        border-color: $licorice;
      }
    }

    &:active,
    &:focus {
      .mat-form-field-outline-start,
      .mat-form-field-outline-end {
        border-color: $cerulean;
      }
    }
  }

  .mat-form-field-wrapper {
    padding-top: 18px;
    margin: 0;
  }

  .mat-form-field-label-wrapper {
    overflow: visible;
  }

  .mat-form-field-label {
    top: -0.875rem;
    left: -0.5rem;
    width: auto;
    height: 1rem;
    color: $licorice;
    font-size: 0.75rem;
    font-weight: 500 !important;
    transform: translateY(0.438rem) scale(1) !important;
  }

  .mat-form-field-outline-gap {
    display: none;
  }

  .mat-form-field-subscript-wrapper {
    margin-top: 0.25rem;
  }

  .mat-hint {
    color: rgba($licorice, 0.6);
    font-weight: 300;
    transform: translate(-0.75rem, 0.063rem);
  }

  .mat-input-element {
    font-size: 0.9375rem;
    font-weight: 400;

    &::placeholder {
      padding-left: 0.25rem;
      margin-top: 8px;
      margin-bottom: 8px;
      color: $ash;
    }
  }

  &.mat-focused {
    .mat-form-field-outline-start,
    .mat-form-field-outline-end {
      border-color: $cerulean !important;
    }
  }

  .mat-form-field-infix {
    padding: 0 0 0.313rem !important;
    border-top-width: 0.563rem;
  }

  .mat-chip {
    min-height: $chips-height;
    padding-left: 0.25rem;
    border-radius: $chips-border-radius;

    &.mat-standard-chip {
      padding: 5px;
      border: none;
      background: $chips-background-color;
      color: $chips-color;
      font-size: 0.813rem;
      font-weight: 400;
      line-height: 0.938rem;

      &::after {
        display: none;
      }

      &:active,
      &:focus,
      &:hover {
        background: $chips-background-color-hover;
        box-shadow: none;
      }

      .mat-chip-remove {
        opacity: 1;
      }

      &:not(.mat-chip-disabled) .mat-chip-remove {
        &:active,
        &:focus,
        &:hover {
          background-color: $delete-icon-background-color-hover;
          opacity: 1;
        }
      }
    }

    &.mat-focused {
      .mat-chip {
        &.mat-standard-chip {
          box-shadow: none;
        }
      }
    }

    .mat-chip-ripple {
      border-radius: 0;
    }
  }

  .qd-icon {
    position: relative;
    display: flex;
    width: $icon-container-size;
    height: $icon-container-size;
    border-radius: 50%;
    margin-right: 0.25rem;
    margin-left: 0.313rem;
    background: $delete-icon-background-color;
    color: $delete-icon-color;
    font-size: $delete-icon-size;
    line-height: $icon-container-size;

    .qd-icon {
      display: block;
      width: $icon-container-size;
      color: $delete-icon-color;
      font-size: $delete-icon-size;
    }
  }
}

.mat-autocomplete-panel {
  border-radius: 0;

  .mat-option {
    height: 2.25rem;
    padding: 0 0.75rem;
    font-size: 0.813rem;
    font-weight: 400;
    line-height: 2.25rem;

    &:active,
    &:focus,
    &:hover {
      background-color: $distance;
    }

    &.mat-selected:not(.mat-option-multiple, .mat-option-disabled) {
      background-color: $transparent;
    }
  }
}

.mat-chip-list-wrapper {
  input.mat-input-element,
  .mat-standard-chip {
    padding: 0.313rem !important;
    padding-left: 0 !important;
  }
}
