// Side nav overlay compiled outside Carbon's ui-shell media query so it works
// at large viewports when the rail expands. Replaces hardcoded UI Shell colors
// with theme tokens (HeaderAction, HeaderSearch, header, side nav, etc.).

@import "carbon-components/scss/globals/scss/vars";
@import "carbon-components/scss/globals/scss/helper-mixins";
@import "carbon-components/scss/globals/scss/vendor/@carbon/elements/scss/import-once/import-once";

/// UI Shell overrides and component styles (overlay, theming).
/// @access private
/// @group ui-shell
@mixin ui-shell {
  .#{$prefix}--side-nav__overlay.#{$prefix}--side-nav__overlay--mobile.#{$prefix}--side-nav__overlay-active {
    position: fixed;
    inset: 0;
    z-index: 6000;
    display: block;
    block-size: 100vh;
    inline-size: 100vw;
    background-color: var(--cds-overlay, rgba(0, 0, 0, 0.6));
    opacity: 1;
    transition:
      opacity 0.3s cubic-bezier(0.5, 0, 0.1, 1),
      background-color 0.3s cubic-bezier(0.5, 0, 0.1, 1);
  }

  // Doubled selectors beat Carbon v10 hardcoded UI Shell colors.
  .#{$prefix}--header.#{$prefix}--header {
    background-color: $background;
    border-bottom-color: $border-subtle;
  }

  .#{$prefix}--header__action.#{$prefix}--header__action {
    display: flex;
    align-items: center;
    justify-content: center;
    padding-bottom: $spacing-01;
    transition: none;
  }

  .#{$prefix}--header__action.#{$prefix}--header__action:hover {
    background-color: $background-hover;
  }

  .#{$prefix}--header__action--active.#{$prefix}--header__action--active {
    background: $layer;
    border-bottom-color: transparent;
    border-right-color: $border-subtle;
    border-left-color: $border-subtle;
  }

  .#{$prefix}--header__action.#{$prefix}--header__action > svg,
  .#{$prefix}--header__action--active.#{$prefix}--header__action--active > svg,
  .#{$prefix}--header__action.#{$prefix}--header__action:hover > svg {
    fill: $icon-primary;
  }

  .#{$prefix}--header__action.#{$prefix}--header__action:focus {
    border-width: $button-border-width;
    border-color: $focus;
    outline: none;
  }

  .#{$prefix}--header__action.#{$prefix}--header__action:active {
    background-color: $background-active;
  }

  .#{$prefix}--header__global .#{$prefix}--header__action.#{$prefix}--header__action {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    min-width: 3rem;
    min-height: 3rem;
    padding-bottom: 2px;
  }

  .#{$prefix}--header__global
    a.#{$prefix}--header__action.#{$prefix}--header__action,
  .#{$prefix}--header__global
    button.#{$prefix}--header__action.#{$prefix}--header__action:not(.#{$prefix}--header-search-button) {
    position: relative;
    text-decoration: none;
    color: inherit;
    transition:
      background-color 110ms,
      border-color 110ms;
    border: 0.0625rem solid rgba(0, 0, 0, 0);
    background-color: transparent;
  }

  .#{$prefix}--header__global
    a.#{$prefix}--header__action.#{$prefix}--header__action:hover,
  .#{$prefix}--header__global
    button.#{$prefix}--header__action.#{$prefix}--header__action:not(.#{$prefix}--header-search-button):hover {
    background-color: $background-hover;
  }

  .#{$prefix}--header__global
    a.#{$prefix}--header__action.#{$prefix}--header__action:focus,
  .#{$prefix}--header__global
    button.#{$prefix}--header__action.#{$prefix}--header__action:not(.#{$prefix}--header-search-button):focus {
    border-width: $button-border-width;
    border-color: $focus;
    outline: none;
  }

  .#{$prefix}--header__global
    a.#{$prefix}--header__action.#{$prefix}--header__action:active,
  .#{$prefix}--header__global
    button.#{$prefix}--header__action.#{$prefix}--header__action:not(.#{$prefix}--header-search-button):active {
    background-color: $background-active;
  }

  .#{$prefix}--header__action.#{$prefix}--btn,
  .#{$prefix}--header__action.#{$prefix}--btn--ghost:hover,
  .#{$prefix}--header__action.#{$prefix}--btn--ghost:active {
    color: inherit;
  }

  a.#{$prefix}--header__name.#{$prefix}--header__name,
  a.#{$prefix}--header__name.#{$prefix}--header__name:hover {
    color: $text-primary;
  }

  a.#{$prefix}--header__name.#{$prefix}--header__name:focus {
    border-color: $focus;
  }

  a.#{$prefix}--header__menu-item.#{$prefix}--header__menu-item {
    background-color: $background;
    color: $text-secondary;
  }

  a.#{$prefix}--header__menu-item.#{$prefix}--header__menu-item:hover {
    background-color: $background-hover;
    color: $text-primary;
  }

  a.#{$prefix}--header__menu-item.#{$prefix}--header__menu-item:active {
    background-color: $background-active;
    color: $text-primary;
  }

  a.#{$prefix}--header__menu-item.#{$prefix}--header__menu-item:focus {
    border-color: $focus;
    outline: none;
    color: $text-primary;
  }

  a.#{$prefix}--header__menu-item.#{$prefix}--header__menu-item[aria-current='page'],
  .#{$prefix}--header__menu-item--current.#{$prefix}--header__menu-item--current {
    color: $text-primary;
  }

  .#{$prefix}--header__menu-title.#{$prefix}--header__menu-title[aria-expanded='true'] {
    background-color: $layer;
    color: $text-secondary;
  }

  .#{$prefix}--header__menu-title.#{$prefix}--header__menu-title[aria-expanded='true']
    + .#{$prefix}--header__menu.#{$prefix}--header__menu {
    background-color: $layer;
  }

  .#{$prefix}--header__menu-title.#{$prefix}--header__menu-title[aria-expanded='true']
    + .#{$prefix}--header__menu.#{$prefix}--header__menu
    a.#{$prefix}--header__menu-item.#{$prefix}--header__menu-item {
    background-color: $layer;
  }

  .#{$prefix}--header__menu-title.#{$prefix}--header__menu-title[aria-expanded='true']
    + .#{$prefix}--header__menu.#{$prefix}--header__menu
    a.#{$prefix}--header__menu-item.#{$prefix}--header__menu-item:hover {
    background-color: $layer-hover;
    color: $text-primary;
  }

  .#{$prefix}--header__menu-title.#{$prefix}--header__menu-title[aria-expanded='true']
    + .#{$prefix}--header__menu.#{$prefix}--header__menu
    a.#{$prefix}--header__menu-item.#{$prefix}--header__menu-item:active {
    background-color: $layer-active;
    color: $text-primary;
  }

  .#{$prefix}--header__menu.#{$prefix}--header__menu
    a.#{$prefix}--header__menu-item.#{$prefix}--header__menu-item:hover {
    background-color: $layer-hover;
    color: $text-primary;
  }

  .#{$prefix}--header__menu-arrow.#{$prefix}--header__menu-arrow {
    fill: $icon-secondary;
  }

  a.#{$prefix}--header__menu-item.#{$prefix}--header__menu-item:hover > svg,
  a.#{$prefix}--header__menu-item.#{$prefix}--header__menu-item:active > svg,
  a.#{$prefix}--header__menu-item.#{$prefix}--header__menu-item:focus > svg {
    fill: $icon-secondary;
  }

  /** Vertical rule between product name and header nav (Carbon v10 used fixed #393939) */
  .#{$prefix}--header__nav.#{$prefix}--header__nav::before {
    background-color: $border-subtle;
  }

  .#{$prefix}--header-panel.#{$prefix}--header-panel {
    overflow-y: auto;
    background-color: $layer;
    color: $text-secondary;
  }

  .#{$prefix}--header-panel--expanded.#{$prefix}--header-panel--expanded {
    border-right-color: $border-subtle;
    border-left-color: $border-subtle;
  }

  .#{$prefix}--skip-to-content.#{$prefix}--skip-to-content:focus {
    border-color: $focus;
    background-color: $background;
    color: $text-primary;
  }

  .#{$prefix}--header__action--text.#{$prefix}--header__action--text {
    display: inline-flex;
    width: auto;
    padding: 0 $spacing-05 $spacing-01;
  }

  .#{$prefix}--header__action-text {
    margin-left: 0.75rem;
    @include type-style('body-short-01');
  }

  .#{$prefix}--header__action-text.#{$prefix}--btn--ghost,
  .#{$prefix}--header__action-text.#{$prefix}--btn--ghost:hover,
  .#{$prefix}--header__action-text.#{$prefix}--btn--ghost:active {
    color: inherit;
  }

  .#{$prefix}--header__search-label {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    white-space: nowrap;
    border: 0;
    visibility: inherit;
    clip: rect(0, 0, 0, 0);
  }

  .#{$prefix}--header__search {
    position: relative;
    display: flex;
    max-width: 28rem;
    width: 100%;
    margin-left: 0.5rem;
    height: 3rem;
    background-color: $layer;
    color: $text-primary;
    transition:
      max-width 0.11s cubic-bezier(0.2, 0, 0.38, 0.9),
      background 0.11s cubic-bezier(0.2, 0, 0.38, 0.9);
  }

  .#{$prefix}--header__search:not(.#{$prefix}--header__search--active) {
    max-width: 3rem;
    background-color: $background;
  }

  .#{$prefix}--header__search.#{$prefix}--header__search--active {
    outline: 2px solid $focus;
    outline-offset: -2px;
  }

  .#{$prefix}--header__search-menu {
    display: flex;
    flex-grow: 1;
    border-bottom: 1px solid $border-subtle;
  }

  .#{$prefix}--header__search-input {
    width: 100%;
    height: 3rem;
    padding: 0;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.375rem;
    letter-spacing: 0;
    color: $text-primary;
    caret-color: $text-primary;
    background-color: initial;
    border: none;
    outline: none;
    transition: opacity 0.11s cubic-bezier(0.2, 0, 0.38, 0.9);
  }

  .#{$prefix}--header__search-input:not(.#{$prefix}--header__search--active) {
    opacity: 0;
    pointer-events: none;
  }

  .#{$prefix}--header-search-button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 100%;
    padding: 0;
    flex-shrink: 0;
  }

  /** Match other header actions: transparent default so no background flash on theme change */
  .#{$prefix}--header-search-button.#{$prefix}--header__action {
    background: transparent;
  }

  .#{$prefix}--header-search-button--disabled {
    border: none;
    pointer-events: none;
  }

  .#{$prefix}--header-search-button:hover {
    background-color: $background-hover;
  }

  .#{$prefix}--header-search-button--hidden {
    opacity: 0;
    display: none;
  }

  .#{$prefix}--header-search-menu {
    position: absolute;
    z-index: 10000;
    padding: 1rem 0;
    left: 0;
    right: 0;
    top: 3rem;
    background-color: $layer;
    border: 1px solid $border-subtle;
    border-top: none;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.15);
  }

  .#{$prefix}--header-search-menu-item {
    padding: 6px 1rem;
    cursor: pointer;
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.29;
    letter-spacing: 0.16px;
    transition: all 70ms cubic-bezier(0.2, 0, 0.38, 0.9);
    display: block;
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: $text-secondary;
  }

  .#{$prefix}--header-search-menu-item--selected,
  .#{$prefix}--header-search-menu-item:hover {
    background-color: $layer-hover;
    color: $text-primary;
  }

  .#{$prefix}--header-search-menu-description {
    font-size: 0.75rem;
    font-weight: 400;
    line-height: 1.34;
    letter-spacing: 0.32px;
    text-transform: lowercase;
    color: $text-secondary;
  }

  .#{$prefix}--header-panel-divider {
    margin: 2rem 1rem 0;
    font-size: 0.75rem;
    line-height: 1.3;
    letter-spacing: 0.02rem;
    color: $text-secondary;
  }

  .#{$prefix}--switcher__item--divider.#{$prefix}--switcher__item--divider {
    background: $border-subtle;
  }

  .#{$prefix}--switcher__item-link.#{$prefix}--switcher__item-link {
    color: $text-secondary;
  }

  .#{$prefix}--switcher__item-link.#{$prefix}--switcher__item-link:hover:not(.#{$prefix}--switcher__item-link--selected.#{$prefix}--switcher__item-link--selected) {
    background: $background-hover;
    color: $text-primary;
  }

  .#{$prefix}--switcher__item-link.#{$prefix}--switcher__item-link:focus {
    outline: 2px solid $focus;
    outline-offset: -2px;
  }

  // Note: mini-units conversion: 1 mini-unit = 0.5rem (8px)
  // - mini-units(6) = 3rem (48px)
  // - mini-units(32) = 16rem (256px)
  // - mini-units(4) = 2rem (32px)
  // - mini-units(2) = 1rem (16px)
  .#{$prefix}--side-nav.#{$prefix}--side-nav {
    background-color: $background;
    color: $text-secondary;
  }

  .#{$prefix}--side-nav--ux.#{$prefix}--side-nav--ux {
    top: 2.25rem; // $spacing-09 equivalent
  }

  .#{$prefix}--side-nav__overlay.#{$prefix}--side-nav__overlay {
    background-color: transparent;
    top: 3rem; // 48px
  }

  .#{$prefix}--side-nav__overlay-active.#{$prefix}--side-nav__overlay-active {
    background-color: rgba(0, 0, 0, 0.65);
  }

  .#{$prefix}--header.#{$prefix}--header
    ~ .#{$prefix}--side-nav.#{$prefix}--side-nav {
    top: 3rem; // mini-units(6) = 3rem
    height: calc(100% - 48px);
  }

  .#{$prefix}--side-nav__items.#{$prefix}--side-nav__items {
    overflow: hidden;
    flex: 1 1 0%;
    padding: 1rem 0 0;
  }

  .#{$prefix}--side-nav--ux.#{$prefix}--side-nav--ux
    .#{$prefix}--side-nav__items.#{$prefix}--side-nav__items,
  .#{$prefix}--side-nav--fixed.#{$prefix}--side-nav--fixed
    .#{$prefix}--side-nav__items.#{$prefix}--side-nav__items,
  .#{$prefix}--side-nav--expanded.#{$prefix}--side-nav--expanded
    .#{$prefix}--side-nav__items.#{$prefix}--side-nav__items,
  .#{$prefix}--side-nav.#{$prefix}--side-nav:hover
    .#{$prefix}--side-nav__items.#{$prefix}--side-nav__items {
    overflow-y: auto;
  }

  .#{$prefix}--side-nav__divider.#{$prefix}--side-nav__divider {
    margin: 0.5rem 1rem; // $spacing-03 $spacing-05
    background-color: $border-subtle;
    height: 1px;
    list-style-type: none;
  }

  .#{$prefix}--side-nav__divider.#{$prefix}--side-nav__divider hr {
    border: none;
  }

  .#{$prefix}--side-nav__submenu.#{$prefix}--side-nav__submenu {
    display: flex;
    align-items: center;
    padding: 0 1rem; // mini-units(2) = 1rem
    height: 2rem; // mini-units(4) = 2rem
    color: $text-secondary;
    transition:
      color 0.11s cubic-bezier(0.2, 0, 0.38, 0.9),
      background-color 0.11s cubic-bezier(0.2, 0, 0.38, 0.9),
      outline 0.11s cubic-bezier(0.2, 0, 0.38, 0.9);
  }

  .#{$prefix}--side-nav__submenu.#{$prefix}--side-nav__submenu:hover {
    background-color: $background-hover;
    color: $text-primary;
  }

  .#{$prefix}--side-nav__submenu.#{$prefix}--side-nav__submenu:focus {
    outline: 2px solid $focus;
    outline-offset: -2px;
  }

  .#{$prefix}--side-nav__submenu-title.#{$prefix}--side-nav__submenu-title {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: left;
  }

  .#{$prefix}--side-nav__submenu-chevron.#{$prefix}--side-nav__submenu-chevron
    > svg {
    width: 1rem; // 16px
    height: 1rem; // 16px
    transition: transform 0.11s cubic-bezier(0.2, 0, 0.38, 0.9);
  }

  .#{$prefix}--side-nav__submenu.#{$prefix}--side-nav__submenu[aria-expanded='true']
    .#{$prefix}--side-nav__submenu-chevron.#{$prefix}--side-nav__submenu-chevron
    > svg {
    transform: rotate(180deg);
  }

  .#{$prefix}--side-nav__item--large.#{$prefix}--side-nav__item--large
    .#{$prefix}--side-nav__submenu.#{$prefix}--side-nav__submenu {
    height: 3rem; // mini-units(6) = 3rem
  }

  .#{$prefix}--side-nav__item--active.#{$prefix}--side-nav__item--active
    .#{$prefix}--side-nav__submenu.#{$prefix}--side-nav__submenu:hover {
    background-color: $layer-selected;
    color: $text-primary;
  }

  .#{$prefix}--side-nav__item--active.#{$prefix}--side-nav__item--active
    .#{$prefix}--side-nav__submenu.#{$prefix}--side-nav__submenu[aria-expanded='false'] {
    position: relative;
    background-color: $layer-selected;
    color: $text-primary;
  }

  .#{$prefix}--side-nav__item--active.#{$prefix}--side-nav__item--active
    .#{$prefix}--side-nav__submenu.#{$prefix}--side-nav__submenu[aria-expanded='false']::before {
    position: absolute;
    background-color: $border-interactive;
    content: '';
    width: 3px;
    top: 0;
    bottom: 0;
    left: 0;
  }

  .#{$prefix}--side-nav__item--active.#{$prefix}--side-nav__item--active
    .#{$prefix}--side-nav__submenu-title.#{$prefix}--side-nav__submenu-title {
    color: $text-primary;
    font-weight: 600;
  }

  .#{$prefix}--side-nav__item--active.#{$prefix}--side-nav__item--active
    .#{$prefix}--side-nav__icon.#{$prefix}--side-nav__icon
    > svg {
    fill: $icon-primary;
  }

  .#{$prefix}--side-nav__menu.#{$prefix}--side-nav__menu {
    display: block;
    max-height: 0;
    visibility: hidden;
  }

  .#{$prefix}--side-nav__submenu.#{$prefix}--side-nav__submenu[aria-expanded='true']
    + .#{$prefix}--side-nav__menu.#{$prefix}--side-nav__menu {
    max-height: 93.75rem; // 1500px
    visibility: inherit;
  }

  .#{$prefix}--side-nav__menu.#{$prefix}--side-nav__menu
    a.#{$prefix}--side-nav__link.#{$prefix}--side-nav__link {
    height: 2rem; // mini-units(4) = 2rem
    min-height: 2rem;
    padding-left: 2rem; // mini-units(4) = 2rem
    font-weight: 400;
  }

  .#{$prefix}--side-nav__item.#{$prefix}--side-nav__item.#{$prefix}--side-nav__item--icon.#{$prefix}--side-nav__item--icon
    a.#{$prefix}--side-nav__link.#{$prefix}--side-nav__link {
    padding-left: 4.5rem; // mini-units(9) = 4.5rem
  }

  .#{$prefix}--side-nav__menu.#{$prefix}--side-nav__menu
    a.#{$prefix}--side-nav__link--current.#{$prefix}--side-nav__link--current,
  .#{$prefix}--side-nav__menu.#{$prefix}--side-nav__menu
    a.#{$prefix}--side-nav__link.#{$prefix}--side-nav__link[aria-current='page'],
  a.#{$prefix}--side-nav__link--current.#{$prefix}--side-nav__link--current {
    background-color: $layer-selected;
  }

  .#{$prefix}--side-nav__menu.#{$prefix}--side-nav__menu
    a.#{$prefix}--side-nav__link--current.#{$prefix}--side-nav__link--current
    > span,
  .#{$prefix}--side-nav__menu.#{$prefix}--side-nav__menu
    a.#{$prefix}--side-nav__link.#{$prefix}--side-nav__link[aria-current='page']
    > span,
  a.#{$prefix}--side-nav__link--current.#{$prefix}--side-nav__link--current
    > span {
    color: $text-primary;
    font-weight: 600;
  }

  a.#{$prefix}--side-nav__link.#{$prefix}--side-nav__link,
  .#{$prefix}--side-nav.#{$prefix}--side-nav
    a.#{$prefix}--header__menu-item.#{$prefix}--header__menu-item,
  .#{$prefix}--side-nav.#{$prefix}--side-nav
    .#{$prefix}--header__menu-title.#{$prefix}--header__menu-title[aria-expanded='true']
    + .#{$prefix}--header__menu.#{$prefix}--header__menu {
    position: relative;
    display: flex;
    align-items: center;
    padding: 0 1rem; // mini-units(2) = 1rem
    min-height: 2rem; // mini-units(4) = 2rem
    text-decoration: none;
    transition:
      color 0.11s cubic-bezier(0.2, 0, 0.38, 0.9),
      background-color 0.11s cubic-bezier(0.2, 0, 0.38, 0.9),
      outline 0.11s cubic-bezier(0.2, 0, 0.38, 0.9);
  }

  .#{$prefix}--side-nav__item--large.#{$prefix}--side-nav__item--large
    a.#{$prefix}--side-nav__link.#{$prefix}--side-nav__link {
    height: 3rem; // mini-units(6) = 3rem
  }

  a.#{$prefix}--side-nav__link.#{$prefix}--side-nav__link
    > .#{$prefix}--side-nav__link-text.#{$prefix}--side-nav__link-text,
  .#{$prefix}--side-nav.#{$prefix}--side-nav
    a.#{$prefix}--header__menu-item.#{$prefix}--header__menu-item
    .#{$prefix}--text-truncate-end.#{$prefix}--text-truncate-end {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: $text-secondary;
    font-size: 0.875rem;
    letter-spacing: 0.1px;
    line-height: 1.25rem;
  }

  a.#{$prefix}--side-nav__link.#{$prefix}--side-nav__link:focus,
  .#{$prefix}--side-nav.#{$prefix}--side-nav
    a.#{$prefix}--header__menu-item.#{$prefix}--header__menu-item:focus {
    outline: 2px solid $focus;
    outline-offset: -2px;
  }

  a.#{$prefix}--side-nav__link.#{$prefix}--side-nav__link[aria-current='page'],
  a.#{$prefix}--side-nav__link--current.#{$prefix}--side-nav__link--current {
    background-color: $layer-selected;
    font-weight: 600;
  }

  a.#{$prefix}--side-nav__link.#{$prefix}--side-nav__link[aria-current='page']
    .#{$prefix}--side-nav__link-text.#{$prefix}--side-nav__link-text,
  a.#{$prefix}--side-nav__link--current.#{$prefix}--side-nav__link--current
    .#{$prefix}--side-nav__link-text.#{$prefix}--side-nav__link-text {
    color: $text-primary;
  }

  a.#{$prefix}--side-nav__link.#{$prefix}--side-nav__link[aria-current='page']::before,
  a.#{$prefix}--side-nav__link--current.#{$prefix}--side-nav__link--current::before {
    position: absolute;
    background-color: $border-interactive;
    content: '';
    width: 3px;
    top: 0;
    bottom: 0;
    left: 0;
  }

  .#{$prefix}--side-nav__icon.#{$prefix}--side-nav__icon {
    display: flex;
    flex: 0 0 1rem; // mini-units(2) = 1rem
    align-items: center;
    justify-content: center;
  }

  .#{$prefix}--side-nav__icon.#{$prefix}--side-nav__icon:not(.#{$prefix}--side-nav__submenu-chevron.#{$prefix}--side-nav__submenu-chevron) {
    margin-right: 1.5rem; // mini-units(3) = 1.5rem
  }

  .#{$prefix}--side-nav__icon.#{$prefix}--side-nav__icon > svg {
    width: 1rem; // mini-units(2) = 1rem
    height: 1rem; // mini-units(2) = 1rem
    fill: $icon-secondary;
  }

  .#{$prefix}--side-nav__icon.#{$prefix}--side-nav__icon
    > svg.#{$prefix}--side-nav-collapse-icon.#{$prefix}--side-nav-collapse-icon {
    display: none;
  }

  .#{$prefix}--side-nav--expanded.#{$prefix}--side-nav--expanded
    .#{$prefix}--side-nav__icon.#{$prefix}--side-nav__icon
    > svg.#{$prefix}--side-nav-expand-icon.#{$prefix}--side-nav-expand-icon {
    display: none;
  }

  .#{$prefix}--side-nav--expanded.#{$prefix}--side-nav--expanded
    .#{$prefix}--side-nav__icon.#{$prefix}--side-nav__icon
    > svg.#{$prefix}--side-nav-collapse-icon.#{$prefix}--side-nav-collapse-icon {
    display: block;
  }

  .#{$prefix}--side-nav--fixed.#{$prefix}--side-nav--fixed
    a.#{$prefix}--side-nav__link.#{$prefix}--side-nav__link,
  .#{$prefix}--side-nav--fixed.#{$prefix}--side-nav--fixed
    .#{$prefix}--side-nav__submenu.#{$prefix}--side-nav__submenu {
    padding-left: 1rem; // mini-units(2) = 1rem
  }

  .#{$prefix}--side-nav--fixed.#{$prefix}--side-nav--fixed
    .#{$prefix}--side-nav__item.#{$prefix}--side-nav__item:not(.#{$prefix}--side-nav__item--icon.#{$prefix}--side-nav__item--icon)
    .#{$prefix}--side-nav__menu.#{$prefix}--side-nav__menu
    a.#{$prefix}--side-nav__link.#{$prefix}--side-nav__link {
    padding-left: 2rem; // mini-units(4) = 2rem
  }

  .#{$prefix}--side-nav.#{$prefix}--side-nav
    .#{$prefix}--header__nav.#{$prefix}--header__nav {
    @media (max-width: 65.98rem) {
      display: block;
    }
  }

  .#{$prefix}--side-nav__header-navigation.#{$prefix}--side-nav__header-navigation {
    display: none;

    @media (max-width: 65.98rem) {
      position: relative;
      display: block;
      margin-bottom: 2rem; // convert.to-rem(32px)
    }
  }

  .#{$prefix}--side-nav__header-divider.#{$prefix}--side-nav__header-divider::after {
    position: absolute;
    background: $border-subtle;
    height: 1px;
    content: '';
    width: calc(100% - 32px);
    bottom: -1rem; // convert.to-rem(-16px)
    left: 1rem; // convert.to-rem(16px)
  }

  .#{$prefix}--side-nav.#{$prefix}--side-nav
    a.#{$prefix}--header__menu-item.#{$prefix}--header__menu-item {
    justify-content: space-between;
    color: $text-secondary;
    white-space: nowrap;
  }

  .#{$prefix}--side-nav.#{$prefix}--side-nav
    a.#{$prefix}--header__menu-item.#{$prefix}--header__menu-item[aria-expanded='true'] {
    background-color: transparent;
  }

  .#{$prefix}--side-nav.#{$prefix}--side-nav
    .#{$prefix}--header__menu-title.#{$prefix}--header__menu-title[aria-expanded='true']
    + .#{$prefix}--header__menu.#{$prefix}--header__menu {
    padding: 0;
    background-color: transparent;
    box-shadow: none;
    width: 100%;
    bottom: inherit;
    transform: none;
  }

  .#{$prefix}--side-nav.#{$prefix}--side-nav
    .#{$prefix}--header__menu-title.#{$prefix}--header__menu-title[aria-expanded='true']
    + .#{$prefix}--header__menu.#{$prefix}--header__menu
    li {
    width: 100%;
  }

  .#{$prefix}--side-nav.#{$prefix}--side-nav
    .#{$prefix}--header__menu-title.#{$prefix}--header__menu-title[aria-expanded='true']
    + .#{$prefix}--header__menu.#{$prefix}--header__menu
    a.#{$prefix}--header__menu-item.#{$prefix}--header__menu-item {
    font-weight: 400;
    padding-left: 4.25rem;
  }

  .#{$prefix}--side-nav.#{$prefix}--side-nav
    .#{$prefix}--header__menu-title.#{$prefix}--header__menu-title[aria-expanded='true']
    + .#{$prefix}--header__menu.#{$prefix}--header__menu
    a.#{$prefix}--header__menu-item.#{$prefix}--header__menu-item:hover {
    background-color: $background-hover;
    color: $text-primary;
  }

  .#{$prefix}--side-nav.#{$prefix}--side-nav
    .#{$prefix}--header__menu-title.#{$prefix}--header__menu-title[aria-expanded='true']
    + .#{$prefix}--header__menu.#{$prefix}--header__menu
    a.#{$prefix}--header__menu-item--current.#{$prefix}--header__menu-item--current:hover {
    background-color: $layer-selected-hover;
  }

  .#{$prefix}--side-nav.#{$prefix}--side-nav
    .#{$prefix}--header__menu.#{$prefix}--header__menu
    a.#{$prefix}--header__menu-item.#{$prefix}--header__menu-item {
    height: inherit;
  }

  .#{$prefix}--side-nav.#{$prefix}--side-nav
    a.#{$prefix}--header__menu-item.#{$prefix}--header__menu-item:hover
    .#{$prefix}--header__menu-arrow.#{$prefix}--header__menu-arrow,
  .#{$prefix}--side-nav.#{$prefix}--side-nav
    a.#{$prefix}--header__menu-item.#{$prefix}--header__menu-item:focus
    .#{$prefix}--header__menu-arrow.#{$prefix}--header__menu-arrow,
  .#{$prefix}--side-nav.#{$prefix}--side-nav
    .#{$prefix}--header__menu-arrow.#{$prefix}--header__menu-arrow {
    fill: $icon-secondary;
  }

  .#{$prefix}--side-nav__item.#{$prefix}--side-nav__item:not(.#{$prefix}--side-nav__item--active.#{$prefix}--side-nav__item--active):hover
    .#{$prefix}--side-nav__item.#{$prefix}--side-nav__item:not(.#{$prefix}--side-nav__item--active.#{$prefix}--side-nav__item--active)
    > .#{$prefix}--side-nav__submenu.#{$prefix}--side-nav__submenu:hover,
  .#{$prefix}--side-nav__item.#{$prefix}--side-nav__item:not(.#{$prefix}--side-nav__item--active.#{$prefix}--side-nav__item--active)
    > .#{$prefix}--side-nav__link.#{$prefix}--side-nav__link:hover,
  .#{$prefix}--side-nav__menu.#{$prefix}--side-nav__menu
    a.#{$prefix}--side-nav__link.#{$prefix}--side-nav__link:not(.#{$prefix}--side-nav__link--current.#{$prefix}--side-nav__link--current):not([aria-current='page']):hover,
  .#{$prefix}--side-nav.#{$prefix}--side-nav
    a.#{$prefix}--header__menu-item.#{$prefix}--header__menu-item:hover,
  .#{$prefix}--side-nav.#{$prefix}--side-nav
    .#{$prefix}--header__menu-title.#{$prefix}--header__menu-title[aria-expanded='true']:hover {
    background-color: $background-hover;
    color: $text-primary;
  }

  .#{$prefix}--side-nav__item.#{$prefix}--side-nav__item:not(.#{$prefix}--side-nav__item--active.#{$prefix}--side-nav__item--active)
    > .#{$prefix}--side-nav__link.#{$prefix}--side-nav__link:hover
    > span,
  .#{$prefix}--side-nav__item.#{$prefix}--side-nav__item:not(.#{$prefix}--side-nav__item--active.#{$prefix}--side-nav__item--active)
    .#{$prefix}--side-nav__menu-item.#{$prefix}--side-nav__menu-item
    > .#{$prefix}--side-nav__link.#{$prefix}--side-nav__link:hover
    > span {
    color: $text-primary;
  }
}

@include exports("ui-shell") {
  @include ui-shell;
}