.lm--header-nav,
.lm--header-nav__dropdown {
  position: relative;
  --lm--header-nav-color: var(--lm--color-foreground);
  --lm--header-nav-icon: var(--lm--icon-size-small);

  --lm--header-nav-spacing: var(--lm--spacing-200);
  --lm--header-nav-spacing-small: var(--lm--spacing-100);

  --lm--header-nav-text-decoration: underline;
  --lm--header-nav-text-decoration-thickness: 2px;

  color: rgb(var(--lm--header-nav-color));
}

.lm--header-nav__group {
  display: flex;
  align-items: center;
  gap: var(--lm--header-nav-spacing);
  margin: 0;
  font-size: var(--lm--header-nav-body-size);
  line-height: 1;
  text-align: left;
  text-decoration: none;
  color: rgb(var(--lm--header-nav-color));
}

.lm--header-nav__group--has-dropdown {
  cursor: pointer;
}

.lm--header-nav__icon {
  width: var(--lm--icon-size-small);
  height: var(--lm--icon-size-small);
}

.lm--header-nav__icon--initials {
  --lm--header-nav-initials-icon: var(--lm--icon-size-base);
  --lm--header-nav-initials-background: var(--lm--button-color-background);
  --lm--header-nav-initials-color: var(--lm--button-color-foreground);
  --lm--header-nav-initials-font-size: var(--lm--font-body-small);
  --lm--header-nav-initials-font-weight: var(--lm--font-body-weight);
  --lm--header-nav-initials-radius: 100%;

  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--lm--header-nav-initials-icon);
  height: var(--lm--header-nav-initials-icon);
  line-height: 1;
  font-size: var(--lm--header-nav-initials-font-size);
  font-weight: var(--lm--header-nav-body-weight);
  border-radius: var(--lm--header-nav-initials-radius);
  letter-spacing: -1px;
  background-color: rgb(var(--lm--header-nav-initials-background));
  color: rgb(var(--lm--header-nav-initials-color));
}

.lm--header-nav__icon--tier img {
  width: var(--lm--icon-size-small);
  height: var(--lm--icon-size-small);
}

.lm--header-nav__text {
  display: flex;
  flex-direction: column;
  width: max-content;
  font-size: var(--lm--font-body-base);
}

.lm--header-nav__heading {
  font-weight: var(--lm--font-body-weight-bold);
}

.lm--action-group {
  display: flex;
  flex-wrap: wrap;
  gap: var(--lm--header-nav-action-group-spacing);
}

.lm--header-nav__account-link {
  position: relative;
}

.lm--header-nav__container {
  position: absolute;
  width: 100%;
  height: 100%;
}

.lm--header-nav__trigger {
  all: unset;
  appearance: none;
  position: absolute;
  width: 100%;
  height: 100%;
  overflow: hidden;
  opacity: 0;
}

.lm--header-nav__dropdown {
  border: var(--lm--border);
  border-radius: var(--lm--radius-200);
  box-shadow: var(--lm--dropdown-shadow);
  width: calc(320 * var(--lm--base-unit));
  background-color: rgb(var(--lm--color-surface));
}

.lm--header-nav__drawer {
  height: 100vh;
  width: calc(380 * var(--lm--base-unit));
  border-radius: 0;
}

.lm--header-nav__summary {
  --lm--header-nav-summary-color: var(--lm--color-foreground);
  --lm--header-nav-summary-spacing: var(--lm--spacing-300);
  --lm--header-nav-summary-padding: var(--lm--spacing-500);
  --lm--header-nav-summary-color-border: var(--lm--color-border);
  --lm--header-nav-summary-border-width: 1px;
  --lm--header-nav-summary-border-opacity: 0.1;
  --lm--header-nav-summary-line-height: 1.4;
  --lm--header-nav-summary-action-group-spacing: var(--lm--spacing-300);
  --lm--header-nav-summary-icon: var(--lm--icon-size-small);

  display: flex;
  flex-direction: column;
  gap: var(--lm--header-nav-summary-spacing);
  padding: var(--lm--header-nav-summary-padding);
  border-bottom: var(--lm--header-nav-summary-border-width) solid
    rgba(var(--lm--header-nav-summary-color-border), var(--lm--header-nav-summary-border-opacity));
  color: rgb(var(--lm--header-nav-summary-color));
}

.lm--header-nav__intro {
  display: flex;
  flex-direction: column;
  gap: var(--lm--header-nav-spacing);
  font-size: var(--lm--font-body-base);
  line-height: 1.2;
}

.lm--header-nav__intro-title {
  font-size: var(--lm--font-body-medium);
  font-weight: var(--lm--font-body-weight-bold);
}

.lm--header-nav__intro-title,
.lm--header-nav__intro-subtitle {
  margin: 0;
}

.lm--header-nav__account-details {
  --lm--header-nav-account-details-spacing: var(--lm--header-nav-spacing-small);
  --lm--header-nav-account-details-padding-inline: var(--lm--spacing-300);
  --lm--header-nav-account-details-padding-block: var(--lm--spacing-100);
  --lm--header-nav-account-details-radius: var(--lm--radius-full);
  --lm--header-nav-account-details-color-border: var(--lm--color-border);
  --lm--header-nav-account-details-border-width: 1px;
  --lm--header-nav-account-details-border-opacity: 0.1;

  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--lm--header-nav-account-details-spacing);
  padding-block: var(--lm--header-nav-account-details-padding-block);
  padding-inline: var(--lm--header-nav-account-details-padding-inline);
  border: var(--lm--header-nav-account-details-border-width) solid
    rgb(
      var(--lm--header-nav-account-details-color-border),
      var(--lm--header-nav-account-details-border-opacity)
    );
  border-radius: var(--lm--header-nav-account-details-radius);
  line-height: 1;
  margin-inline: calc(-0.5 * var(--lm--header-nav-summary-padding));
}

.lm--header-nav__account-tier {
  display: flex;
  gap: var(--lm--header-nav-account-details-spacing);
  align-items: center;
}

.lm--header-nav__account-tier-icon {
  width: var(--lm--header-nav-summary-icon);
  height: var(--lm--header-nav-summary-icon);
}

.lm--header-nav__account-tier-name {
  font-weight: var(--lm--font-body-weight-bold);
}

.lm--header-nav__account-points {
  --lm--header-nav-points-badge-background: var(--lm--header-nav-summary-color), 0.08;
  --lm--header-nav-points-badge-color: var(--lm--header-nav-summary-color);
  --lm--header-nav-points-badge-radius: var(--lm--radius-full);
  --lm--header-nav-points-badge-padding-inline: var(--lm--spacing-300);
  --lm--header-nav-points-badge-padding-block: var(--lm--spacing-100);

  display: block;
  line-height: 1;
  padding: var(--lm--header-nav-points-badge-padding-block)
    var(--lm--header-nav-points-badge-padding-inline);
  background-color: rgb(var(--lm--header-nav-points-badge-background));
  border-radius: var(--lm--header-nav-points-badge-radius);
  margin-right: calc(-0.5 * var(--lm--header-nav-account-details-padding-inline));
  color: rgb(var(--lm--header-nav-points-badge-color));
  text-decoration: none;
}

.lm--header-nav__action-group {
  gap: var(--lm--header-nav-summary-action-group-spacing);
}

.lm--header-nav__blocks {
  --lm--header-nav-blocks-padding-inline: var(--lm--spacing-300);
  --lm--header-nav-blocks-padding-block: var(--lm--spacing-300);
  --lm--header-nav-block-color-border: var(--lm--color-border);
  --lm--header-nav-block-border-opacity: 0;
  --lm--header-nav-block-padding-inline: 0;
  --lm--header-nav-block-padding-block: 0;
  --lm--header-nav-block-spacing: var(--lm--spacing-300);
  --lm--header-nav-block-decoration: underline;

  display: flex;
  flex-direction: column;
  gap: var(--lm--header-nav-block-spacing);
  list-style: none;
  margin: 0;
  padding-inline: var(--lm--header-nav-blocks-padding-inline);
  padding-block: var(--lm--header-nav-blocks-padding-block);
}

.lm--header-nav__block {
  display: flex;
  flex: 1;
  border-bottom: 1px solid
    rgb(var(--lm--header-nav-block-color-border), var(--lm--header-nav-block-border-opacity));
}

.lm--header-nav__block:last-child {
  border-bottom: 0;
}

.lm--header-nav__block-link {
  display: flex;
  flex: 1;
  gap: var(--lm--spacing-300);
  padding-inline: var(--lm--header-nav-block-padding-inline);
  padding-block: var(--lm--header-nav-block-padding-block);
  color: inherit;
  text-decoration: none;
}

.lm--header-nav__block-col {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 0.4rem;
}

.lm--header-nav__block-title,
.lm--header-nav__block-subtitle {
  display: block;
  line-height: 1;
}

.lm--header-nav__block-title {
  color: rgb(var(--lm--color-foreground-neutral));
  line-height: var(--lm--font-heading-base);
  font-weight: var(--lm--font-body-weight-medium);
}

.lm--header-nav__block-subtitle {
  font-size: var(--lm--font-body-small);
}

@media (hover: hover) {
  .lm--header-nav__block-link:hover .lm--header-nav__block-title {
    text-decoration: var(--lm--header-nav-block-decoration);
  }
}