@amsterdam/design-system-css/dist/tab-navigation/tab-navigation.css

Stylesheets for all components from the Amsterdam Design System and some general utilities. Use it to apply the visual design of the City of Amsterdam to your HTML elements or non-React components.

.ams-tab-navigation__list{list-style:none;margin-block:0;padding-inline-start:0;box-shadow:var(--ams-tab-navigation-list-box-shadow);display:flex;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory}@media(min-width: 37.5rem){.ams-tab-navigation--vertical{hyphenate-limit-chars:var(--ams-typography-hyphenate-limit-chars);hyphens:auto;overflow-wrap:break-word}.ams-tab-navigation--vertical .ams-tab-navigation__list{box-shadow:var(--ams-tab-navigation-list-vertical-box-shadow);flex-direction:column;overflow-x:visible}}.ams-tab-navigation__item{flex-shrink:0;scroll-snap-align:start}.ams-tab-navigation__link{align-items:center;color:var(--ams-tab-navigation-link-color);cursor:var(--ams-tab-navigation-link-cursor);display:flex;font-family:var(--ams-tab-navigation-link-font-family);font-size:var(--ams-tab-navigation-link-font-size);font-weight:var(--ams-tab-navigation-link-font-weight);gap:var(--ams-tab-navigation-link-gap);line-height:var(--ams-tab-navigation-link-line-height);outline-offset:var(--ams-tab-navigation-link-outline-offset);padding-block:var(--ams-tab-navigation-link-padding-block);padding-inline:var(--ams-tab-navigation-link-padding-inline);text-decoration-line:none}.ams-tab-navigation__link:hover{color:var(--ams-tab-navigation-link-hover-color)}.ams-tab-navigation__link:hover:not([aria-current=page]){box-shadow:var(--ams-tab-navigation-link-hover-box-shadow)}.ams-tab-navigation__link[aria-current=page]{box-shadow:var(--ams-tab-navigation-link-current-box-shadow);font-weight:var(--ams-tab-navigation-link-current-font-weight)}@media(forced-colors: active){.ams-tab-navigation__link[aria-current=page]{background-color:SelectedItem}}@media(min-width: 37.5rem){.ams-tab-navigation--vertical .ams-tab-navigation__link:hover:not([aria-current=page]){box-shadow:var(--ams-tab-navigation-link-vertical-hover-box-shadow)}.ams-tab-navigation--vertical .ams-tab-navigation__link[aria-current=page]{box-shadow:var(--ams-tab-navigation-link-vertical-current-box-shadow)}}.ams-tab-navigation__link-label-wrapper{display:grid}.ams-tab-navigation__link-label,.ams-tab-navigation__link-label-hidden{display:initial;grid-area:1/1}.ams-tab-navigation__link-label-hidden{font-weight:var(--ams-tab-navigation-link-current-font-weight);pointer-events:none;-webkit-user-select:none;user-select:none;visibility:hidden}/*# sourceMappingURL=tab-navigation.css.map */