material-component-multi-dropdown {
  display: inline-block;

  .material-component-multi-dropdown {
    position: relative;
    width: @DEFAULT_MATERIAL_DROPDOWN_WIDTH;

    .mat-form-field.mat-focused .mat-select-arrow {
			color: extract(@CLR_0, 1);
		}

    .readonly-panel {
      width: 100%;
      height: 100%;
      position: absolute;
      left: 0;
      top: 0;
      opacity: 0;
    }

    .description,
    .validation {
      width: 100%;
      padding-top: @MATERIAL_DROPDOWN_DESC_PADDING;
    }

    .help {
      width: 100%;
      padding-top: @MATERIAL_DROPDOWN_HELP_PADDING;
    }

    .mat-form-field {
      width: 100%;
    }

    .mat-form-field-appearance-legacy {
      .mat-form-field-wrapper {
        padding-bottom: unset;
      }

      .mat-form-field-underline {
        bottom: 0;
      }

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

    .mat-form-field.mat-focused .mat-form-field-ripple {
      background-color: @MATERIAL_DROPDOWN_LABEL_COLOR;
    }

    .mat-button-wrapper .mat-icon {
      color: @MATERIAL_DROPDOWN_LABEL_COLOR;
    }

    .mat-form-field-label-wrapper {
      > .mat-form-field-label {
        color: @MATERIAL_DROPDOWN_LABEL_COLOR;
      }
    }

    &.readonly {
      .dropdown-container {
        border-style: dotted;

        > .dropdown {
          cursor: default;
          border-style: dotted;
          background-color: @MATERIAL_DISABLED_BG_COLOR;
        }
      }
    }

    &.dirty {
      .label {
        font-style: italic;
      }
    }
  }

  .material-component-multi-dropdown.label-center, .material-component-multi-dropdown.label-left, .material-component-multi-dropdown.label-right {
    .mat-form-field-label-wrapper .mat-form-field-label {
      text-align: left;
    }
  }

  .material-component-multi-dropdown.label-center {
    .mat-form-field-label-wrapper .mat-form-field-label.mat-form-field-empty {
      text-align: center;
    }
  }

  .material-component-multi-dropdown.label-left {
    .mat-form-field-label-wrapper .mat-form-field-label.mat-form-field-empty {
      text-align: left;
    }
  }

  .material-component-multi-dropdown.label-right {
    .mat-form-field-label-wrapper .mat-form-field-label.mat-form-field-empty {
      text-align: right;
    }
  }

  &.normal {
    .label {
      color: @MATERIAL_DROPDOWN_LABEL_COLOR;
    }

    .mat-form-field.mat-focused .mat-form-field-ripple {
      background-color: @MATERIAL_DROPDOWN_LABEL_COLOR;
    }

    // .mat-form-field-appearance-legacy .mat-form-field-underline {
    //   background-color: @MATERIAL_DROPDOWN_LABEL_COLOR;
    // }

    .mat-button-wrapper .mat-icon {
      color: @MATERIAL_DROPDOWN_LABEL_COLOR;
    }

    .mat-form-field-label-wrapper {
      > .mat-form-field-label {
        color: @MATERIAL_DROPDOWN_LABEL_COLOR;
      }
    }
  }

  &.warning {
    .label {
      color: @MATERIAL_FORM_CONTROL_FONT_COLOR_WARNING;
    }

    .mat-form-field.mat-focused .mat-form-field-ripple {
      background-color: @MATERIAL_FORM_CONTROL_FONT_COLOR_WARNING;
    }

    .mat-form-field-appearance-legacy .mat-form-field-underline {
      background-color: @MATERIAL_FORM_CONTROL_FONT_COLOR_WARNING;
    }

    .mat-button-wrapper .mat-icon {
      color: @MATERIAL_FORM_CONTROL_FONT_COLOR_WARNING;
    }

    .mat-form-field-label-wrapper {
      > .mat-form-field-label {
        color: @MATERIAL_FORM_CONTROL_FONT_COLOR_WARNING;
      }
    }
  }

  &.error {
    .label {
      color: @MATERIAL_FORM_CONTROL_FONT_COLOR_ERROR;
    }

    .mat-form-field.mat-focused .mat-form-field-ripple {
      background-color: @MATERIAL_FORM_CONTROL_FONT_COLOR_ERROR;
    }

    .mat-form-field-appearance-legacy .mat-form-field-underline {
      background-color: @MATERIAL_FORM_CONTROL_FONT_COLOR_ERROR;
    }

    .mat-button-wrapper .mat-icon {
      color: @MATERIAL_FORM_CONTROL_FONT_COLOR_ERROR;
    }

    .mat-form-field-label-wrapper {
      > .mat-form-field-label {
        color: @MATERIAL_FORM_CONTROL_FONT_COLOR_ERROR;
      }
    }
  }

  &.success {
    .label {
      color: @MATERIAL_FORM_CONTROL_FONT_COLOR_SUCCESS;
    }

    .mat-form-field.mat-focused .mat-form-field-ripple {
      background-color: @MATERIAL_FORM_CONTROL_FONT_COLOR_SUCCESS;
    }

    .mat-form-field-appearance-legacy .mat-form-field-underline {
      background-color: @MATERIAL_FORM_CONTROL_FONT_COLOR_SUCCESS;
    }

    .mat-button-wrapper .mat-icon {
      color: @MATERIAL_FORM_CONTROL_FONT_COLOR_SUCCESS;
    }

    .mat-form-field-label-wrapper {
      > .mat-form-field-label {
        color: @MATERIAL_FORM_CONTROL_FONT_COLOR_SUCCESS;
      }
    }
  }

  &.disabled {
    .label {
      color: @MATERIAL_DISABLED_FONT;
    }

    .mat-form-field.mat-focused .mat-form-field-ripple {
      background-color: @MATERIAL_DISABLED_FONT;
    }

    .mat-form-field-appearance-legacy .mat-form-field-underline {
      background-color: @MATERIAL_DISABLED_FONT;
    }

    .mat-button-wrapper .mat-icon {
      color: @MATERIAL_DISABLED_FONT;
    }

    .mat-form-field-label-wrapper {
      > .mat-form-field-label {
        color: @MATERIAL_DISABLED_FONT;
      }
    }
  }
}

.cdk-overlay-container {

  .mat-option-multiple {
    mat-pseudo-checkbox.mat-pseudo-checkbox-checked, mat-pseudo-checkbox.mat-pseudo-checkbox-indeterminate {
      background: @CLR_BRAND;
    }
    mat-pseudo-checkbox.mat-pseudo-checkbox-checked::after {
      top: 4px;
      left: 2px;
    }
  }

  .mat-option-ripple.mat-ripple {
    .mat-ripple-element {
      background-color: rgba(red(@CLR_BRAND), green(@CLR_BRAND), blue(@CLR_BRAND), @MATERIAL_DROPDOWN_ALPHA);
    }
  }

  .mat-select-content {
    .mat-option:focus:not(.mat-option-disabled), .mat-option:hover:not(.mat-option-disabled) {
      background-color: rgba(red(@CLR_BRAND), green(@CLR_BRAND), blue(@CLR_BRAND), @MATERIAL_DROPDOWN_ALPHA);
    }

    .mat-option.mat-selected:not(.mat-option-disabled) {
      color: @CLR_BRAND;
    }

    .mat-option.mat-active {
      background: rgba(red(@CLR_BRAND), green(@CLR_BRAND), blue(@CLR_BRAND), @MATERIAL_DROPDOWN_ALPHA);
    }
  }
}