.row--gutter {
  margin-left: -15px;
  margin-right: -15px;
  overflow: hidden;
}

a {
  color: #727272;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  transition: color 0.5s ease;
}
.ux-info-banner[type=info] a:hover {
  color: #fff;
}
.ux-info-banner[type=error] a:hover {
  color: #ff0201;
}
a:hover {
  color: #131313;
}

.row--gutter {
  margin-left: -15px;
  margin-right: -15px;
  overflow: hidden;
}

/* stylelint-disable selector-max-id */
/**
@prop --menu-item-background-color: background color of the menu item
@prop --menu-item-background-color-hover: background color of the menu item on hover
@prop --menu-item-text-color: text color of the menu item
@prop --menu-item-text-color-active: text color of the menu item when active
@prop --menu-item-text-color-disabled: text color of the menu item when disabled
@prop --menu-item-min-height: minimum height of the menu item
@prop --menu-item-min-width: minimum width of the menu item
@prop --menu-item-font-size: font size of the menu item
@prop --menu-item-font-weight: font weight of the menu item
@prop --menu-item-line-height: line height of the menu item
@prop --menu-item-divider-color: color of the menu item divider
 */
:root {
  --menu-item-background-color: var(
      --menu-item-background-color,
      #f2f3f6
  );
  --menu-item-background-color-hover: var(
      --menu-item-background-color-hover,
      #fff
  );
  --menu-item-text-color: var(--menu-item-text-color, #000);
  --menu-item-text-color-active: var(--menu-item-text-color-active, #000);
  --menu-item-text-color-disabled: var(
      --menu-item-text-color-disabled,
      #ccc
  );
  --menu-item-min-height: var(--menu-item-min-height, 52px);
  --menu-item-min-width: var(--menu-item-min-width, 52px);
  --menu-item-font-size: var(--menu-item-min-width, 1.125rem);
  --menu-item-font-weight: var(--menu-item-font-weight, 300);
  --menu-item-line-height: var(--menu-item-line-height, 1.3);
  --menu-item-divider-color: var(--menu-item-divider-color, #fff);
}

:host {
  display: block;
  box-sizing: border-box;
  position: relative;
  background: var(--menu-item-background-color, #f2f3f6);
}
:host #button {
  position: relative;
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  justify-content: stretch;
  box-sizing: border-box;
  padding: 16px 30px 16px 40px;
  gap: 8px;
  border: 0;
  border-radius: 0;
  cursor: pointer;
  outline: none;
  text-decoration: none;
  background: var(--menu-item-background-color, #f2f3f6);
  color: var(--menu-item-text-color, #000);
  min-height: var(--menu-item-min-height, 52px);
  min-width: var(--menu-item-min-width, 52px);
  font-family: "Frutiger-Light", sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-weight: 400;
  font-size: var(--menu-item-font-size, 1.125rem);
  line-height: var(--menu-item-line-height, 1.3);
  text-align: start;
  appearance: none;
  width: 100%;
}
:host #button:hover {
  color: var(--menu-item-text-color-active, #000);
  background: var(--menu-item-background-color-hover, #fff);
}
:host #button:focus, :host #button:focus-visible {
  outline: 2px solid #51a7eb;
  outline-offset: -2px;
  color: var(--menu-item-text-color-active, #000);
}
:host #label {
  flex: 1 0 auto;
}
:host .is-hidden {
  display: none;
}
:host .submenu {
  display: none;
}

:host([level="0"]:first-of-type) #button::before {
  content: "";
  display: block;
  height: 2px;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  background: linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.2) 50%, rgba(0, 0, 0, 0) 100%);
  top: 0;
  margin-top: -1px;
}

:host #button::after {
  content: "";
  display: block;
  height: 2px;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  background: linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.2) 50%, rgba(0, 0, 0, 0) 100%);
  top: 100%;
  margin-top: -1px;
}

:host([expanded]) .submenu {
  display: block;
}

:host([level="1"]) #button,
:host([level="2"]) #button,
:host([level="3"]) #button {
  padding-left: 60px;
}

:host([current]:not([current=false])) #button,
:host([current-child]:not([current-child=false]):not([expanded])) #button {
  color: var(--menu-item-text-color-active, #000);
  background: var(--menu-item-background-color-hover, #fff);
}