/**
 * @file
 * Visual styles for the authenticated user account menu.
 */

.ec-account-menu {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ec-2);
  align-items: center;
  justify-content: flex-end;
  margin: 0 0 var(--ec-5);
  padding: var(--ec-2);
  list-style: none;
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid var(--ec-border);
  border-radius: var(--ec-radius-md);
}

.ec-account-menu__item {
  margin: 0;
}

.ec-account-menu__link {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 0 var(--ec-3);
  border-radius: var(--ec-radius-sm);
  color: var(--ec-text);
  font-family: var(--ec-font-sans);
  font-size: var(--ec-text-sm);
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  transition:
    background-color var(--ec-dur-2) var(--ec-ease),
    color var(--ec-dur-2) var(--ec-ease);
}

.ec-account-menu__link:focus-visible {
  outline: none;
  box-shadow: var(--ec-ring);
}

.ec-account-menu__link:hover,
.ec-account-menu__item.is-active > .ec-account-menu__link {
  background: var(--ec-primary);
  color: var(--ec-primary-ink);
}

.ec-account-menu__subnav {
  display: grid;
  gap: var(--ec-1);
  margin: var(--ec-1) 0 0;
  padding: 0;
  list-style: none;
}

@media (max-width: 640px) {
  .ec-account-menu {
    justify-content: stretch;
  }

  .ec-account-menu__item,
  .ec-account-menu__link {
    flex: 1 1 auto;
  }

  .ec-account-menu__link {
    justify-content: center;
  }
}