.component {
  margin-bottom: var(--gap-min);
  width: 100%;
}

.list {
  padding-left: 0;
  list-style: none;
  margin-top: 0;
  margin-bottom: 0;
}

.item:not(:last-child) {
  margin-bottom: 1px;
}

.label {
}

.text {
}

.link {
  background: var(--navigation-default-background, #000);
  color: var(--navigation-default-color, #fff);
  padding: var(--navigation-top-navigation-padding, 0.5rem 1rem);
  font-weight: 500;
  text-decoration: var(--navigation-default-text-decoration, none);
  line-height: 1.5;
  display: flex;
  align-items: center;
  transition: background 50ms ease;
  border-radius: var(--navigation-border-radius, 3px);
}

.link:hover,
.link:focus {
  background: var(--navigation-hover-background, #333);
  color: var(--navigation-hover-color, #999);
  text-decoration: var(--navigation-hover-text-decoration, none);
}
.link:hover .icon-wrapper:not(.transparent),
.link:focus .icon-wrapper:not(.transparent) {
  --icon-color: var(--navigation-hover-icon-color, red);
  background: var(--navigation-hover-icon-background, blue);
}

.link:active {
  background: var(--navigation-active-background, #333);
  color: var(--navigation-active-color, #000);
  /* font-weight: inherit; */
}
.link:active .icon-wrapper:not(.transparent) {
  --icon-color: var(--navigation-icon-active-color, --color-foreground-inverse);
  background: var(--navigation-icon-active-background, --color-blue-tint-1);
}

.icon-wrapper {
  --icon-color: var(
    --navigation-default-icon-color,
    --color-foreground-inverse
  );
  background: var(--navigation-default-icon-background, --color-blue-tint-4);
  border-radius: 100%;
  margin-right: var(--space-8);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  flex: none;
}

.icon-wrapper-house-icon {
  --navigation-default-icon-background: var(--color-blue-tint-4);
  --icon-color: var(--color-blue-tint-1);
  --navigation-current-background: var(--color-blue-tint-4);
  --navigation-current-color: var(--color-blue-tint-1);
  --navigation-current-icon-color: #fff;
  --navigation-current-icon-background: var(--color-blue-tint-1);
  --navigation-hover-icon-color: #fff;
  --navigation-hover-icon-background: var(--color-blue-tint-1);
  --navigation-active-background: var(--color-blue-tint-4);
  --navigation-icon-active-color: #fff;
  --navigation-icon-active-background: var(--color-blue-tint-1);
}

.icon-wrapper-newspaper-icon {
  --navigation-default-icon-background: var(--color-green-tint-4);
  --icon-color: var(--color-green-tint-1);
  --navigation-current-background: var(--color-green-tint-4);
  --navigation-current-color: var(--color-green-tint-1);
  --navigation-current-icon-color: #fff;
  --navigation-current-icon-background: var(--color-green-tint-1);
  --navigation-hover-icon-color: #fff;
  --navigation-hover-icon-background: var(--color-green-tint-1);
  --navigation-active-background: var(--color-green-tint-4);
  --navigation-icon-active-color: #fff;
  --navigation-icon-active-background: var(--color-green-tint-1);
}

.icon-wrapper-calendar-icon {
  --navigation-default-icon-background: var(--color-orange-tint-4);
  --icon-color: var(--color-orange-tint-1);
  --navigation-current-background: var(--color-orange-tint-4);
  --navigation-current-color: var(--color-orange-tint-1);
  --navigation-current-icon-color: #fff;
  --navigation-current-icon-background: var(--color-orange-tint-1);
  --navigation-hover-icon-color: #fff;
  --navigation-hover-icon-background: var(--color-orange-tint-1);
  --navigation-active-background: var(--color-orange-tint-4);
  --navigation-icon-active-color: #fff;
  --navigation-icon-active-background: var(--color-orange-tint-1);
}

.icon-wrapper-people-icon {
  --navigation-default-icon-background: var(--color-pink-tint-4);
  --icon-color: var(--color-pink-tint-1);
  --navigation-current-background: var(--color-pink-tint-4);
  --navigation-current-color: var(--color-pink-tint-1);
  --navigation-current-icon-color: #fff;
  --navigation-current-icon-background: var(--color-pink-tint-1);
  --navigation-hover-icon-color: #fff;
  --navigation-hover-icon-background: var(--color-pink-tint-1);
  --navigation-active-background: var(--color-pink-tint-4);
  --navigation-icon-active-color: #fff;
  --navigation-icon-active-background: var(--color-pink-tint-1);
}

.transparent {
  background: transparent;
}

.icon.icon {
  --icon-size: 1rem;
}

.link[aria-current] {
  background: var(--navigation-current-background, #f00);
  color: var(--navigation-current-color, #00f);
  font-weight: 500;
  text-decoration: var(--navigation-active-text-decoration, none);
}
.link[aria-current] .icon-wrapper:not(.transparent) {
  --icon-color: var(
    --navigation-current-icon-color,
    --color-foreground-inverse
  );
  background: var(--navigation-current-icon-background, --color-blue-tint-1);
}