//
// Copyright (c) Tiny Technologies, Inc. All rights reserved.
// Licensed under the LGPL or a commercial license.
// For LGPL see License.txt in the project root for license information.
// For commercial licenses see https://www.tiny.cloud/
//

//
// Menubar
//

@menubar-background-color: @background-color;
@menubar-background: url("data:image/svg+xml;charset=utf8,%3Csvg height='@{_menubar-height}' viewBox='0 0 40 @{_menubar-height}' width='40' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='0' y='@{_menubar-divider-height}' width='100' height='1' fill='@{_menubar-row-separator-color}'/%3E%3C/svg%3E") left 0 top 0 @menubar-background-color;
@menubar-padding-x: @toolbar-group-padding-x;
@menubar-separator-color: @border-color;
@menubar-row-separator-color: @border-color;

// private variables
@_menubar-row-separator-color: escape('@{menubar-row-separator-color}');
@_menubar-height: @menubar-select-height + (@menubar-select-spacing-y * 2) + 1px;
@_menubar-divider-height: @_menubar-height - 1px;

.tox {
  .tox-menubar {
    background: @menubar-background;
    background-color: @menubar-background-color;
    display: flex;
    flex: 0 0 auto;
    flex-shrink: 0;
    flex-wrap: wrap;
    padding: 0 @menubar-padding-x 0 (@menubar-padding-x + @menubar-select-spacing-x);
  }

  // Add a top border when toolbar_location is bottom
  &.tox-tinymce:not(.tox-tinymce-inline) .tox-editor-header:not(:first-child) .tox-menubar {
    border-top: 1px solid @menubar-separator-color;
  }
}