.top-menu {
  align-items: center;
  display: flex;
  gap: var(--size-3);
  inline-size: 100%;
  min-inline-size: 0;
}

.top-menu__brand {
  flex: 0 0 auto;
}

.top-menu__nav {
  flex: 1;
  min-inline-size: 0;
  overflow: visible;
  padding-block: var(--size-1);
}

.top-menu__list {
  display: flex;
  gap: var(--size-1);
  list-style: none;
  margin: 0;
  min-inline-size: max-content;
  padding: 0;
}

.top-menu__item {
  position: relative;
}

.top-menu__button {
  --btn-background: transparent;
  --btn-border-color: transparent;
  --btn-box-shadow: none;
  --btn-font-weight: var(--font-normal);
  --btn-justify-content: start;
  --btn-outline-size: 0;
  --btn-padding: var(--size-1) var(--size-2);
}

.top-menu__button:focus-visible {
  --btn-background: var(--color-border-light);
}

.top-menu__button--active {
  --btn-background: var(--color-border-light);
}

.top-menu__caret {
  display: inline-flex;
  margin-inline-start: var(--size-1);
  transition: transform var(--time-200);
}

.top-menu__button--trigger[aria-expanded="true"] .top-menu__caret {
  transform: var(--rotate-180);
}

.top-menu__dropdown {
  background-color: var(--color-surface);
  border-radius: var(--rounded-md);
  border-width: var(--border);
  box-shadow: var(--shadow-md);
  inline-size: max-content;
  inset-block-start: calc(100% + var(--size-1));
  inset-inline-start: 0;
  min-inline-size: 16rem;
  padding: var(--size-1);
  position: absolute;
  z-index: 20;
}

.top-menu__sub {
  display: flex;
  flex-direction: column;
  gap: var(--size-1);
}

.top-menu__button--sub {
  --btn-inline-size: 100%;
}

.top-menu__account {
  align-items: center;
  display: flex;
  flex: 0 0 auto;
  gap: var(--size-1);
}

.top-menu__button--account {
  max-inline-size: 18rem;
}

.top-menu__button--icon {
  --btn-inline-size: var(--size-10);
  justify-content: center;
}

@media (width < 64rem) {
  .top-menu {
    flex-wrap: wrap;
    row-gap: var(--size-2);
  }

  .top-menu__brand {
    order: 1;
  }

  .top-menu__account {
    margin-inline-start: auto;
    order: 2;
  }

  .top-menu__nav {
    flex-basis: 100%;
    order: 3;
  }
}