@use "@styles/abstracts/functions" as fun;
@use "@styles/abstracts/placeholders";

.list {
  @extend %reset-ordered-list;
  counter-reset: link;

  .list {
    border-top: fun.convert-px(1) solid var(--color-primary-dark);
  }

  a {
    display: flex;
    flex-flow: row nowrap;
    width: 100%;
    padding: var(--spacing-2xs) var(--spacing-xs);
    background: none;
    text-decoration: underline solid transparent 0;
    transition: all 0.16s ease-in-out 0s, text-decoration-color 0s;
    counter-increment: link;

    &:hover,
    &:focus {
      background: var(--color-bg-secondary);
    }

    &:focus {
      color: var(--color-primary);
      text-decoration-color: var(--color-primary-light);
      text-decoration-thickness: 0.25ex;
    }

    &:active {
      background: var(--color-bg-tertiary);
      text-decoration-color: transparent;
      text-decoration-thickness: 0;
    }

    &::before {
      content: counters(link, ".") ". ";
      color: var(--color-secondary);
      padding-right: var(--spacing-2xs);
    }
  }

  li {
    width: 100%;
    margin: 0;

    &:not(:last-of-type) {
      border-bottom: fun.convert-px(1) solid var(--color-primary-dark);
    }

    &::before {
      display: none;
    }
  }

  li li a::before {
    padding-left: var(--spacing-sm);
  }

  li li li a::before {
    padding-left: var(--spacing-lg);
  }
}