@use '@observability/ui/styles/mixins' as mixins;
@use '@observability/ui/styles/variables' as variables;
@import '@observability/ui/styles/overlay';

.filter__button {
  @include mixins.flex-row;
  @include mixins.button-reset;
  @include mixins.border-radius;
  @include mixins.hover-opacity;
  @include mixins.font-style(menu);

  min-height: 37px;
  max-height: 37px;
  background-color: variables.$gray-200;
  padding: {
    right: 12px;
    left: 8px;
  };
  font-weight: 400;

  mat-icon.cancel-icon {
    @include mixins.icon-size(18px);
    margin-right: -9px;
    margin-left: 3px;
    color: variables.$dark-disabled-text;

  }

  mat-icon {
    @include mixins.icon-size(16px);

    margin-right: 4px;
  }

  &:disabled {
    @include mixins.font-color(secondary);

    cursor: not-allowed;
  }

  &.icon-only {
    padding-right: variables.$space-xs;
    background-color: transparent;

    mat-icon {
      margin-right: 0;
    }
  }

  &.active {
    border-color: variables.$gray-500;

    &.icon-only {
      background-color: variables.$green-500;
    }
  }
}

.filter__number {
  @include mixins.flex-row;

  height: 18px;
  min-width: 18px;
  margin-left: 4px;
  padding: 0 4px;
  background-color: variables.$dark-primary-text;
  border-radius: 9px;
  color: variables.$light-text;
}

.filter__list {
  @include mixins.font-style(body, secondary);

  flex: auto;
  overflow-y: auto;
  padding: 0 20px;

  radio-field {
    margin: 16px 0;

    &::ng-deep > mat-radio-group {
      @include mixins.flex-column($justify: flex-start, $align: flex-start);

      mat-radio-button.radio-field__button {
        margin-bottom: unset;

        &:not(:last-of-type) {
          margin-right: unset;
        }
      }

      mat-radio-button.radio-field__button + mat-radio-button.radio-field__button {
        margin-top: 24px;
      }
    }
  }
}

.filter__field {

  padding: 12px;

  &.hidden {
    display: none;
  }

  &::ng-deep {
    .mat-checkbox-label {
      max-width: 232px;
      text-overflow: ellipsis;
      overflow: hidden;
    }
  }
}

.filter__selected-container {
  @include mixins.flex-column(nowrap, center, flex-start);

  .selected-label {
    color: variables.$dark-accent-text;
    font-size: 10px;
    line-height: 12px;
    margin-top: 4px;
  }

  .selected-value {
    @include mixins.flex-row($justify: flex-start);
    font-size: 13px;
    font-weight: 400;
    line-height: 14px;
    margin-bottom: 4px;

    .selected-value-text {
      max-width: 130px;
      white-space: nowrap;
    }

    .selected-value-plus {
      @include mixins.font-style($style: menu, $color: link);

      margin-left: variables.$space-xxs;
    }
  }
}

[mat-menu-item] {
  flex: auto 0 0;

  &.hidden {
    display: none;
  }

  // Match mat-selected style
  &:disabled {
    @include mixins.font-color(variables.$dark-primary-text);

    background: rgba(0, 0, 0, 0.05);
    font-weight: 400;
  }
}

.exceed-selected {
  color: variables.$blue-700;
  font-weight: 500;
}

::ng-deep .filter_panel {
  min-width: 112px;
  max-width: 280px;
  overflow: hidden;
  border-radius: 4px;
  outline: 0;
  min-height: 64px;
  background: variables.$white;
}

.scrollable {
  overflow: auto;
  overflow-x: hidden;
  max-height: 30vh;
}

::ng-deep .single-select .mat-checkbox-inner-container {
  display: none;
}

.selected {
  background: rgba(#2c2c2c, 0.04);
}

.spinner-container {
  @include mixins.flex-row();
  width: 100%;
}
