$component-name: category-tree;

.#{$component-name} {
  .accordion {
    --bs-accordion-bg: transparent;
    --bs-accordion-btn-bg: transparent;
    --bs-accordion-active-bg: transparent;
  }

  &__child {
    padding: 0;
    border: none;
    .#{$component-name}__list {
      display: flex;
      flex-direction: column;
      row-gap: 0.5rem;

      &[data-depth="0"] {
        > .category-tree__item {
          > .category-tree__item__header {
            .category-tree__item__link {
              font-weight: 600;
            }
          }
        }
      }

      &[data-depth="1"] {
        padding-left: 0.5rem;
      }

      &[data-depth="2"] {
        padding-left: 0.5rem;
      }

      &[data-depth="3"] {
        padding-left: 0.5rem;
      }

      &[data-depth="4"] {
        padding-left: 0.5rem;
      }
    }
  }

  &__title {
    &__link {
      color: var(--bs-body-color);
    }
  }

  &__item {
    /* stylelint-disable-next-line declaration-no-important */
    transition: $transition-base;

    &.active {
      > .category-tree__item__header {
        &.parent {
          .category-tree__item__link {
            color: var(--bs-primary);
          }
        }
      }
    }

    &__link {
      color: var(--bs-body-color);

      &:hover {
        color: var(--bs-primary);
      }
    }

    &__header {
      &.split {
        display: flex;
        padding: 0.25rem 0;

        .accordion-button {
          margin: -0.25rem -0.5rem -0.25rem auto;
        }
      }

      &.nosplit {
        display: flex;
        padding: 0.25rem 0;
      }

      .category-tree__item__link {
        flex-grow: 1;
      }
    }
  }
}

// Accordion variant
.accordion--category {
  margin-bottom: 0;

  .accordion-item {
    border: none;
  }

  .accordion-body {
    padding: 0.5rem 0 0;
    margin: 0;
  }

  .accordion-button {
    width: auto;
    padding: 0.25rem 0.5rem;
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
  }
}
