//
// 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/
//

//
// Toolbar
//

@toolbar-background-color: @background-color;
@toolbar-background: url("data:image/svg+xml;charset=utf8,%3Csvg height='@{_toolbar-height}' viewBox='0 0 40 @{_toolbar-height}' width='40' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='0' y='@{_toolbar-divider-height}' width='100' height='1' fill='@{_toolbar-row-separator-color}'/%3E%3C/svg%3E") left 0 top @toolbar-padding-y @toolbar-background-color;
@toolbar-row-separator-color: @toolbar-group-separator-color;
@toolbar-separator-color: @border-color;
@toolbar-padding-y: 0; // Note that a positive value doesn't work with toolbar collapsing into multiple rows. Will cause issues with the toolbar row separator
@toolbar-padding-x: 0;

// private variables
@_toolbar-row-separator-color: escape('@{toolbar-row-separator-color}');
@_toolbar-divider-height: @_toolbar-height - 1px;
@_toolbar-height: @toolbar-button-height + (@toolbar-button-spacing-y * 2) + (@toolbar-group-spacing-y * 2) + 1px;

.tox {
  .tox-toolbar-overlord {
    background-color: @toolbar-background-color;
  }

  .tox-toolbar,
  .tox-toolbar__primary,
  .tox-toolbar__overflow {
    background: @toolbar-background;
    background-color: @toolbar-background-color;
    display: flex;
    flex: 0 0 auto;
    flex-shrink: 0;
    flex-wrap: wrap;
    padding: @toolbar-padding-y @toolbar-padding-x;
  }

  .tox-toolbar__overflow.tox-toolbar__overflow--closed {
    height: 0;
    opacity: 0;
    padding-bottom: 0;
    padding-top: 0;
    visibility: hidden;
  }

  .tox-toolbar__overflow--growing {
    transition: height .3s ease, opacity .2s linear .1s;
  }

  .tox-toolbar__overflow--shrinking {
    transition: opacity .3s ease, height .2s linear .1s, visibility 0s linear .3s;
  }

  // Add top borders
  .tox-menubar + .tox-toolbar,
  .tox-menubar + .tox-toolbar-overlord .tox-toolbar__primary {
    border-top: 1px solid @toolbar-separator-color;
    margin-top: -1px; // Temporary fix to hide menubar bottom border below the toolbar
  }

  .tox-toolbar--scrolling {
    flex-wrap: nowrap;
    overflow-x: auto;
  }

  .tox-pop .tox-toolbar {
    border-width: 0;
  }

  .tox-toolbar--no-divider {
    background-image: none;
  }

  // Wrap for icons within toolbar buttons. Required for loading SVG via Alloy
  .tox-tbtn__icon-wrap {
    //
  }
}

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

// Floating more drawer styles. Uses pop toolbar styles
.tox.tox-tinymce-aux {
  .tox-toolbar__overflow {
    background-color: @pop-background-color;
    border: 1px solid @pop-border-color;
    border-radius: @pop-border-radius;
    box-shadow: @pop-box-shadow;
  }
}

// RTL
.tox[dir=rtl] {
  .tox-tbtn__icon-rtl svg {
    transform: rotateY(180deg);
  }
}