@aplus-frontend/ui/theme/ap-form/search-form-sorter.less

@import '../mixins/mixins.less';
@import '../mixins/config.less';

@searchFormSorterItemHolader: ~'@{ns}-search-form-sorter-sorter-item-holder';

.b(search-form-sorter, {
  &-content {
    width: 560px;
  }
  &-header {
    padding: @spacing-xl @spacing-xl 0px;
    &-title {
      .reset-component();
      color: var(--ap-text-color-2);
      font-size: @font-size-lg;
      font-weight: 700;
      display: inline-block;
      padding-bottom: @spacing-xs;
    }
    &-desc {
      .reset-component();
      color: var(--ap-text-color-3);
    }
    &-action-wrapper {
      padding: @spacing;
      margin: -@spacing;
      cursor: pointer;
    }
    &-reset-btn {
      .reset-component();
      color: var(--ap-color-link);
    }
  }
  &-sorter-wrapper {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    margin-left: -4px;
    margin-right: -4px;
    row-gap: 8px;
  }
  &-sorter-item {
    flex: 0 0 33.333333%;
    max-width: 33.333333%;
    padding-inline: @spacing-xs;
    > div {
      border: 1px solid var(--ap-color-bg);
      border-radius: @border-radius;
      padding: 8px;
      display: flex;
      align-items: center;
      background-color: #fff;
      &:hover {
        border-color: var(--ap-color-primary);
        cursor: pointer;
        .@{searchFormSorterItemHolader} {
          color: var(--ap-color-primary) !important;
        }
      }
    }
    &--hidden {
      display: none;
    }
  }
  &-sorter-item-text {
    .reset-component();
    padding-left: @spacing-xs;
    color: var(--ap-text-color-2);
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
});