v1/web/themes/contrib/gin/styles/layout/horizontal_toolbar.scss

// Toolbar Variables
:root {
  --gin-toolbar-secondary-height: 48px;
  --gin-toolbar-height: 39px;
  --gin-scroll-offset: 72px;
  --gin-toolbar-y-offset: var(--gin-toolbar-height);
  --gin-toolbar-x-offset: 0px; // Needs px to work in calc() functions.
  --gin-sticky-offset: 0px; // Needs px to work in calc() functions.

  @include mq(medium) {
    --gin-toolbar-secondary-height: 60px;
    --gin-toolbar-height: 53px;
    --gin-scroll-offset: 180px;
    --gin-icon-size-toolbar: 18px;
    --gin-sticky-offset: var(--gin-height-sticky);
  }
}

.gin-secondary-toolbar--frontend {
  top: calc(var(--gin-toolbar-secondary-height) * -1);
}

// Toolbar
.toolbar {
  .toolbar-bar {
    background: #100f10;
    box-shadow: none;

    @include mq(medium) {
      display: flex;
      background: none;
    }

    @include mq(medium) {
      height: 0;
    }

    .toolbar-menu-administration {
      > .toolbar-menu {
        > .menu-item {
          > .toolbar-icon,
          > .toolbar-box > .toolbar-icon:not(.toolbar-handle) {
            padding-top: 20px;
            padding-bottom: 20px;
            padding-left: 3em;
            padding-right: 2.25em;
            white-space: nowrap;
          }

          > .toolbar-box > .toolbar-icon:not(.toolbar-handle)::before {
            left: var(--gin-spacing-s);
          }
        }
      }
    }

    .toolbar-toggle-orientation {
      display: none !important;
    }
  }
}

.toolbar-tray-vertical .toolbar-menu .level-1 > .toolbar-box .toolbar-icon.toolbar-handle {
  width: 3rem;

  &:before {
    left: var(--gin-spacing-m);
  }
}

.toolbar-tray-horizontal .level-1 .menu-item--expanded > .toolbar-box a {
  width: 100%;
}

.toolbar-horizontal .toolbar-tray {
  border-bottom: 0 none;
}

.toolbar .toolbar-menu,
.toolbar-horizontal .menu-item > .toolbar-menu,
.toolbar-horizontal .toolbar-tray .menu-item--expanded.menu-item--expanded,
.toolbar .toolbar-tray {
  background-color: var(--gin-bg-layer);
}

.toolbar-horizontal .toolbar-tray .toolbar-toggle-orientation {
  border-left: 1px solid var(--gin-border-color);
}

.toolbar-tray a,
.toolbar-tray span,
.toolbar .toolbar-menu .toolbar-menu a,
.toolbar .toolbar-menu .toolbar-menu span {
  color: var(--gin-color-text);

  &:hover {
    color: var(--gin-color-title);
  }
}

.toolbar .toolbar-tray .menu-item--active-trail > .toolbar-box a,
.toolbar .toolbar-tray .menu-item > .toolbar-icon.is-active,
.toolbar .toolbar-tray .menu-item > .toolbar-box > .toolbar-icon.is-active,
.toolbar .toolbar-tray a.is-active {
  color: var(--gin-color-primary);
  font-weight: var(--gin-font-weight-bold);

  &::before {
    background: var(--gin-color-primary);
  }
}

.toolbar .toolbar-tray .hover-intent > .toolbar-icon,
.toolbar .toolbar-tray .hover-intent > .toolbar-box > .toolbar-icon:not(.toolbar-handle) {
  color: var(--gin-color-primary-hover);
  background-color: var(--gin-bg-item-hover);

  &::before,
  + .toolbar-handle::before {
    background-color: var(--gin-color-primary);
  }
}

.toolbar-tray-horizontal a:focus,
.toolbar-box a:focus,
.toolbar .toolbar-icon.toolbar-handle:focus {
  background-color: var(--gin-bg-layer2);
}

.toolbar-menu__trigger,
.toolbar .menu-item-title,
.menu-item-sub-title {
  display: none !important;
}

.gin--dark-mode .toolbar .toolbar-toggle-orientation {
  background-color: var(--gin-bg-layer2);
}

.gin--classic-toolbar {
  table.sticky-header {
    @include mq(large) {
      margin-top: 0;
    }
  }
}

#toolbar-item-administration-tray {
  box-shadow: 0 0 4px rgba(0, 0, 0, .1),
              0 2px 6px 2px rgba(0, 0, 0, .03);

  .gin--dark-mode & {
    box-shadow: 0 0 4px rgba(0, 0, 0, .3);
  }

  .toolbar-logo {
    display: flex;
    height: 100%;
  }
}

.toolbar-tray-horizontal ul li.menu-item--expanded ul li.menu-item--expanded,
.toolbar-tray-horizontal .toolbar-menu:not(:first-child) li.menu-item--expanded > a:focus {
  position: relative;

  &:before {
    top: 12px;
    right: 12px;
  }
}

.toolbar-tray-horizontal .menu-item:hover {
  background-color: transparent;
}

.gin--horizontal-toolbar.gin--edit-form .page-wrapper__node-edit-form .layout-region-node-secondary {
  @include mq(large) {
    top: var(--gin-toolbar-height);
    height: calc(100% - var(--gin-toolbar-height));
  }
}

// Main horizontal nav
.gin--horizontal-toolbar #toolbar-administration {
  @include mq(medium) {
    z-index: 502;
    position: fixed;
    top: 0;
    width: 100%;

    &,
    .toolbar-bar {
      height: var(--gin-toolbar-height);
      background: var(--gin-bg-layer);
    }
  }

  // align with content nicely
  .toolbar-lining {
    @include mq(medium) {
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
      padding-right: 0;
    }
  }

  // home tab
  .menu-item__tools,
  .menu-item__admin_toolbar_tools-help {
    @include mq(medium) {
      margin-left: calc(var(--gin-spacing-m) * -1);
    }
  }

  // home logo
  .toolbar-icon-admin-toolbar-tools-help {
    width: auto;
    height: 100%;
    text-indent: -999em;

    &:before {
      mask-size: 20px 20px;
    }

    @include mq(medium) {
      padding-left: 2.875em;

      &:before {
        top: -1px;
        left: 14px;
        width: 24px;
        mask-size: 28px 28px;
      }

      // Default
      &.toolbar-icon-default {
        margin-right: var(--gin-spacing-xs);
      }
    }
  }

  // target fist level only
  .toolbar-menu-administration {
    @include mq(medium) {
      margin-left: m#{i}n(5vw, var(--gin-spacing-xxl));
      margin-right: m#{i}n(5vw, var(--gin-spacing-xxl));

      > .toolbar-menu {
        display: flex;
        flex-wrap: nowrap;
        width: 100%;
      }
    }

    .menu-item .menu-item:hover > .toolbar-icon {
      color: var(--gin-color-primary-hover);
      background: var(--gin-color-primary-light);
    }
  }
}