@use '../base/token';
@use '../abstract';

// =========================================
// ServiceMap, NavDropdown
// =========================================

.cds-nav-menu-item {
  display: block;
  padding: 12px 16px;
  font-size: abstract.rem(token.$font-size-2);

  &:hover {
    background-color: var(--gray-50);
    border-radius: 8px;
  }
  // @include abstract.debug();

  &__link-top {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-block-end: 4px;
  }

  &__link-label {
    color: var(--gray-700);
    font-size: abstract.rem(token.$font-size-2);
    font-weight: abstract.font-weight-to-number(token.$font-weights-commerce-sans-2);
  }

  &__link-text {
    font-weight: abstract.font-weight-to-number(token.$font-weights-commerce-sans-0);
    color: var(--gray-400);
    margin-bottom: 12px;
  }

  &__link-more {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: abstract.font-weight-to-number(token.$font-weights-commerce-sans-1);
    color: var(--blue-500);
  }
}