.archive_filter {
  margin-bottom: var(--padding-xs);
  display: flex;
  flex-direction: column;

  .filter_toggle {
    padding: calc(var(--gap-xxs) / 2);
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--gap-xxs);

    &::after {
      content: "";
      display: block;
      width: 8px;
      height: 5px;
      background: center / contain no-repeat
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5' fill='none' viewBox='0 0 8 5'%3E%3Cpath fill='%2382bf39' d='M4 3.7592 1.0387.6962a.242.242 0 0 0-.3508 0 .2633.2633 0 0 0 0 .363l3.1369 3.2446a.242.242 0 0 0 .3508 0l3.1365-3.2443A.26.26 0 0 0 7.3846.878a.26.26 0 0 0-.0725-.1813.242.242 0 0 0-.3508 0z'/%3E%3Cpath fill='%2382bf39' fill-rule='evenodd' d='M3.8248 4.3038a.242.242 0 0 0 .3508 0l3.1365-3.2443.0084-.0091a.26.26 0 0 0 .0641-.1725.26.26 0 0 0-.0725-.1813.242.242 0 0 0-.3508 0L4 3.7592 1.0387.6962a.242.242 0 0 0-.3508 0 .2634.2634 0 0 0 0 .363zM4 2.87 1.4792.2626A.8535.8535 0 0 0 .2466.2635c-.3288.3414-.3288.887 0 1.2284l3.1377 3.2455a.8535.8535 0 0 0 1.2318 0l3.1365-3.2442A.884.884 0 0 0 8 .8779.883.883 0 0 0 7.7526.263a.8535.8535 0 0 0-1.2318 0z' clip-rule='evenodd'/%3E%3C/svg%3E");
    }
  }

  .filter_by {
    display: none;
  }

  ul {
    list-style: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--gap-xxs);
    margin-top: 0;
    height: 0;
    opacity: 0;
    transition:
      margin-top 0.2s ease,
      height 0.2s ease,
      opacity 0.2s ease;

    li.current > a,
    a:hover {
      background-color: var(--color-light-green);
    }

    li {
      width: 100%;
    }

    a {
      display: block;
      text-align: center;
      background-color: var(--color-light-grey);
      color: var(--color-dark-teal);
      font-size: 16px;
      padding: var(--gap-xs) clamp(16px, 1.307vw + 8.471px, 32px);
      font-weight: 400;
      border-radius: var(--border-radius-max);
      transition:
        background-color 0.4s ease,
        color 0.4s ease;
    }
  }

  &.active {
    ul {
      margin-top: calc(var(--gap-s) / 2);
      height: max-content;
      opacity: 1;
    }
  }

  /* responsive */
  @media (width >= 992px) {
    .filter_toggle {
      display: none;
    }

    .filter_by {
      display: inline-block;
      margin-inline: auto;
      margin-bottom: var(--gap-xs);
    }

    ul {
      height: max-content;
      opacity: 1;
      flex-flow: row wrap;
      justify-content: center;

      li {
        width: auto;
      }
    }
  }
}

/* backgrounds */
.bg_light_grey {
  .archive_filter {
    ul {
      li.current > a,
      a:hover {
        background-color: var(--color-light-green);
      }

      a {
        background-color: var(--color-white);
      }
    }
  }
}