@mixin theme-ribbon($theme) {
  #ribbon {
    height: $custom-ribbon-height;
    display: flex;
    position: fixed;
    width: 100%;
    z-index: $fixed-ribbon-zindex;
    background-color: map-get($theme, ribbon-background);
    border-bottom: 1px solid map-get($theme, topbar-border);
    border-left: 1px solid map-get($theme, topbar-border);
    box-sizing: content-box;
    @include restyle-typography($theme);

    @include on-sm {
      display: none;
    }

    .breadcrumb {
      display: flex;
      align-items: center;
      padding-left: $custom-ribbon-padding !important;

      > li {
        color: map-get($theme, ribbon-foreground);

        &::before {
          color: map-get($theme, ribbon-foreground);
        }

        + li::before {
          content: "\203A";
          padding: 20px;
        }
      }
    }
  }
}