/**
 * Category filter
 * @define category-filter
 */

@use 'sass:map';

// Exposed variables
$theme: null !default;
$category-filter: null !default;

.ecl-category-filter {
  max-width: 18rem;
}

.ecl-category-filter__list-item {
  display: flex;
  flex-direction: column;
  position: relative;
}

.ecl-category-filter__item {
  appearance: none;
  align-items: center;
  background-color: transparent;
  border: none;
  border-bottom: map.get($category-filter, 'separator');
  box-sizing: border-box;
  color: var(--c-d);
  display: flex;
  font: var(--f-s);
  justify-content: space-between;
  min-height: 44px;
  padding: var(--s-xs) var(--s-m);
  text-align: left;
  text-decoration: none;

  &:hover {
    background-color: map.get($category-filter, 'background-hover');
    cursor: pointer;
  }

  &:focus-visible {
    outline: 2px solid var(--c-p);
    outline-offset: -2px;
  }
}

.ecl-category-filter__item-icon {
  align-self: flex-start;
  color: var(--c-p);
  flex-shrink: 0;
  margin-inline-end: var(--s-xs);
  margin-top: 6px;
}

.ecl-category-filter__item--level-1 {
  .ecl-category-filter__item-icon {
    margin-inline-end: 0;
    margin-inline-start: var(--s-xs);
  }

  &.ecl-category-filter__item--has-children {
    padding-inline-end: var(--s-xs);
  }
}

.ecl-category-filter__list {
  list-style: none;
  margin: 0;
  padding: 0;

  .ecl-category-filter__list {
    .ecl-category-filter__item {
      border-bottom: 0;
      justify-content: initial;
    }
  }
}

.ecl-category-filter__list-item:last-child {
  .ecl-category-filter__item {
    border-bottom: 0;
  }
}

.ecl-category-filter__item[aria-current='true'] {
  font-weight: map.get($theme, 'font-weight', 'bold');
}

// Toggle sub level
.ecl-category-filter__list-item .ecl-category-filter__list {
  display: none;
}

.ecl-category-filter__list-item--open {
  background-color: map.get($category-filter, 'background-subitem');

  &::before {
    background-color: var(--c-p);
    content: '';
    display: inline-block;
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 4px;
    z-index: 1;
  }

  // stylelint-disable-next-line no-descending-specificity
  .ecl-category-filter__item {
    border-bottom: 0;
  }

  > .ecl-category-filter__item .ecl-category-filter__item-icon {
    transform: rotate(180deg);
  }

  .ecl-category-filter__item--level-1 .ecl-category-filter__item-icon {
    transform: rotate(0deg);
  }

  > .ecl-category-filter__list {
    display: block;
  }
}

// Sub level spacing
@mixin category-filter-item($level: 0) {
  padding-inline-start: calc(
    var(--s-m) + #{$level - 1} * #{map.get($category-filter, 'subitem-spacing')}
  );

  &.ecl-category-filter__item--has-children {
    padding-inline-start: calc(
      var(--s-m) + #{$level - 2} *
        #{map.get($category-filter, 'subitem-spacing')}
    );
  }
}

.ecl-category-filter__item--level-2 {
  @include category-filter-item(2);
}

.ecl-category-filter__item--level-3 {
  @include category-filter-item(3);
}

.ecl-category-filter__item--level-4 {
  @include category-filter-item(4);
}

// No js
.no-js .ecl-category-filter__list-item {
  .ecl-category-filter__item {
    border-bottom: 0;
  }

  .ecl-category-filter__list {
    display: block;
  }
}
