.navigation-tab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  min-width: 120px;
  width: fit-content;
  padding: var(--Navigation-Tab-Vertical-Padding, 8px)
           var(--Navigation-Tab-Horizontal-Padding, 24px);
  border: var(--Stroke-S) solid transparent;
  border-radius: var(--Navigation-Tab-Radius, 9999px);
  background-color: var(--Navigation-Tab-Primary-Default-Background, transparent);
  color: var(--Navigation-Tab-Primary-Default-Text, #001c35);
  font: var(--Body-Small-Medium);
  text-decoration: none;
  cursor: pointer;
  user-select: none;
  min-height: var(--P20, 20px);
  box-sizing: border-box;
  transition: background-color 0.3s ease-in-out, color 0.3s ease-in-out, outline-color 0.3s ease-in-out;

  & .navigation-tab-label {
    flex: 0 0 auto;
    text-align: center;
    font: inherit;
    white-space: nowrap;
  }

  & .icon {
    color: currentcolor;
  }
}


.navigation-tab-default,
.navigation-tab-primary {
  color: var(--Navigation-Tab-Primary-Default-Text, #001C35);
  background-color: var(--Navigation-Tab-Primary-Default-Background, transparent);
}


.navigation-tab-default:hover:not(:disabled),
.navigation-tab-default.is-hover:not(:disabled),
.navigation-tab-primary:hover:not(:disabled),
.navigation-tab-primary.is-hover:not(:disabled) {
  color: var(--Navigation-Tab-Primary-Hover-Text, #005299);
  background-color: var(--Navigation-Tab-Primary-Hover-Background, transparent);
}

.navigation-tab-active,
.navigation-tab-default:active:not(:disabled),
.navigation-tab-default.is-active:not(:disabled),
.navigation-tab-primary:active:not(:disabled),
.navigation-tab-primary.is-active:not(:disabled) {
  color: var(--Navigation-Tab-Active-Text, #001C35);
  background-color: var(--Navigation-Tab-Active-Background, #FFF);
}

.navigation-tab-secondary {
  color: var(--Navigation-Tab-Primary-Default-Text, #001C35);
  background-color: var(--Navigation-Tab-Primary-Default-Background, transparent);
}

.navigation-tab-secondary:hover:not(:disabled),
.navigation-tab-secondary.is-hover:not(:disabled) {
  color: var(--Navigation-Tab-Primary-Hover-Text, #005299);
  background-color: var(--Navigation-Tab-Primary-Hover-Background, transparent);
}

.navigation-tab-secondary:active:not(:disabled),
.navigation-tab-secondary.is-active:not(:disabled) {
  color: var(--Navigation-Tab-Active-Text, #001C35);
  background-color: var(--Navigation-Tab-Active-Background, #FFF);
}

.navigation-tab:focus-visible,
.navigation-tab.is-focused {
  outline: var(--Stroke-S) solid var(--Border-Key-Brand-Mild-Focused);
}

.navigation-tab-block {
  display: block;
  margin: 1rem 0;
}

.navigation-tab-unica {
  gap: var(--Navigation-Tab-Gap, 0.5rem);
  width: auto;
  min-width: 0;
  background: var(--Navigation-Tab-Unica-Unipol-Background, #001C35);
  color: var(--Navigation-Tab-Unica-Unipol-Text, #F9F9F7);
  font: var(--Single-Line-Body-Small-Link);

  & .navigation-tab-unica-label {
    flex: 0 0 auto;
    text-decoration-line: underline;
    text-decoration-style: solid;
    text-decoration-skip-ink: auto;
    text-decoration-thickness: auto;
    text-underline-offset: auto;
    text-underline-position: from-font;
  }

  & .icon {
    color: var(--Navigation-Tab-Unica-Unipol-Icon, #F9F9F7);
  }
}

@media (width < 768px) {
  .navigation-tab {
    & .navigation-tab-label {
      font: var(--Heading-Fixed);
    }
  }
}