@use 'sass:map';

@use 'mixins/mixins' as *;
@use 'mixins/var' as *;
@use 'common/var' as *;

@include b(multi-filter) {
  @include set-component-css-var('multi-filter', $multi-filter);

  @include e(selected) {
    display: flex;

    @include e(tags) {
      display: flex;
      flex-wrap: wrap;
    }
  }

  @include e(list) {
    display: flex;
    flex-direction: column;

    @include m(item) {
      display: flex;
      margin-top: var(--sg-multi-filter-list-margin);

      @include e(options) {
        display: table-cell;
      }
    }
  }

  @include e(title) {
    line-height: 1;
    flex-shrink: 0;
    padding: var(--sg-multi-filter-tag-padding);
    padding-left: 0;
    text-align: right;
  }

  .sg-tag {
    height: auto;
    border: none;
    margin: 0 var(--sg-multi-filter-tag-gap) var(--sg-multi-filter-tag-gap) 0;
    padding: var(--sg-multi-filter-tag-padding);
    border-radius: var(--sg-border-radius-base);
    cursor: pointer;

    .sg-tag__content {
      display: flex;
      align-items: center;
      user-select: none;
    }
  }

  @each $size in (default, small) {
    @include m($size) {
      font-size: map.get($multi-filter-font-size, $size);

      .sg-tag {
        .sg-tag__content {
          font-size: map.get($multi-filter-font-size, $size);
        }
      }
    }
  }
}