.archive_filter {
  margin: 0 auto var(--padding-xs);
  justify-content: center;

  .filter-toggle {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--gap-xxs);
    color: var(--color-black);

    &:after {
      content: "";
      display: block;
      width: 10px;
      height: 7px;
      background: center / contain no-repeat
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='7' fill='none'%3E%3Cpath fill='%23000' d='m5 6.06-5-5L1.06 0 5 3.94 8.94 0 10 1.06l-5 5Z'/%3E%3C/svg%3E");
    }
  }

  ul {
    display: flex;
    flex-direction: column;
    list-style: none;
    gap: calc(var(--gap-s) / 2) var(--gap-s);
    margin-top: 0;
    height: 0;
    opacity: 0;
    transition:
      height 0.4s ease,
      opacity 0.4s ease,
      margin-top 0.4s ease;

    li {
      &.current {
        a {
          background-color: var(--color-green);
          color: var(--color-black);
          border-color: var(--color-green);
        }
      }
    }

    a {
      width: 100%;
      text-align: center;
      display: inline-block;
      padding: clamp(14px, 1.144vw + 7.412px, 28px)
        clamp(24px, 1.961vw + 12.706px, 48px);
      border: 1px solid var(--color-black);
      border-radius: var(--border-radius-max);
      background-color: transparent;
      color: var(--color-black);
      font-size: 20px;
      font-weight: 400;
      text-transform: capitalize;
      text-decoration: none;
      cursor: pointer;
      transition:
        background-color 0.4s ease,
        border-color 0.4s ease,
        color 0.4s ease;

      &:hover {
        background-color: var(--color-green);
        border-color: var(--color-green);
      }
    }
  }

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

  /* responsive */
  @media (width >= 576px) {
    ul {
      flex-direction: row;
      justify-content: center;

      a {
        width: auto;
      }
    }
  }

  @media (width >= 992px) {
    .filter-toggle {
      display: none;
    }

    ul {
      height: max-content;
      opacity: 1;
    }
  }
}