@use 'pix-design-tokens/fonts';
@use 'pix-design-tokens/typography';

.tutorials-filters {

  .pix-accordions {

    &__title {
      @extend %pix-body-s;

      position: relative;
      align-items: center;
      padding-left: 2rem;
      color: var(--pix-neutral-800);
      text-align: left;
      text-transform: uppercase;

      &::before {
        position: absolute;
        top: 10%;
        left: 1rem;
        height: 80%;
        border-left: 4px solid;
        border-radius: 5px;
        content: '';
      }

      &.jaffa::before {
        border-color: var(--pix-information-light);
      }

      &.emerald::before {
        border-color: var(--pix-content-light);
      }

      &.cerulean::before {
        border-color: var(--pix-communication-light);
      }

      &.wild-strawberry::before {
        border-color: var(--pix-security-light);
      }

      &.butterfly-bush::before {
        border-color: var(--pix-environment-light);
      }
    }
  }

  &__footer {
    display: flex;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
  }
}

.tutorials-filters-areas-competences {

  &__item-checkbox {

    .pix-checkbox__label {
      flex-grow: 1;
    }
  }

  &__item-checkbox + &__item-checkbox {
    margin-top: 20px;
  }
}
