//
// Menubar
//

@menubar-background: repeating-linear-gradient(@menubar-row-separator-color 0 1px, transparent 1px @_menubar-height) center top @_menubar-height e("/") 100% calc(100% - @_menubar-height) no-repeat;
@menubar-background-color: @background-color;
@menubar-padding-x: @toolbar-group-padding-x;
@menubar-separator-color: transparent;
@menubar-row-separator-color: transparent;

// private variables
@_menubar-height: @menubar-select-height + (@menubar-select-spacing-y * 2) + 1px;

.tox {
  .tox-menubar {
    background: @menubar-background;
    background-color: @menubar-background-color;
    display: flex;
    flex: 0 0 auto;
    flex-shrink: 0;
    flex-wrap: wrap;
    grid-column: ~"1 / -1";
    grid-row: 1;
    padding: 0 @menubar-padding-x 0 (@menubar-padding-x + @menubar-select-spacing-x);
  }

  .tox-promotion + .tox-menubar {
    grid-column: 1;
  }
}