@view-header-padding: (@pad-sm + @keyboard-focus-outline-width);    // Account for outline/border of the buttons
@view-header-padding-mobile: @pad-sm;
@view-pane-padding: @pad-sm;

@view-toolbar-button-spacing-x: 8px;
@view-toolbar-group-spacing-x: 12px;

.tox {
  .tox-view-wrap,
  .tox-view-wrap__slot-container {
    background-color: @background-color;
    display: flex;
    flex: 1;
    flex-direction: column;
    height: 100%;     // Override the height set by browsers so the view doesn't grow beyond editor container
  }

  .tox-view {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    overflow: hidden;
    background-color: @background-color;
  }

  .tox-view__header {
    align-items: center;
    display: flex;
    font-size: @font-size-base;
    justify-content: space-between;
    padding: @view-header-padding;
    position: relative;
  }

  .tox-view__label {
    color: @text-color;
    font-weight: @button-font-weight;
    line-height: @button-line-height;
    padding: @button-padding-y @button-padding-x;
    text-align: @button-text-align;
    white-space: nowrap;
  }

  .tox-view__label--normal {
    font-size: @font-size-md;
  }

  .tox-view__label--large {
    font-size: @font-size-lg;
  }

  .tox-view--mobile.tox-view__header,
  .tox-view--mobile.tox-view__toolbar {
    padding: @view-header-padding-mobile;
  }

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

  .tox-view__align-right {
    margin-left: auto;
  }

  .tox-view__toolbar {
    display: flex;
    flex-direction: row;
    gap: @view-toolbar-button-spacing-x; // spacing between buttons within a group
    justify-content: space-between;
    overflow-x: auto;           // Show horizontal scrollbar on small screens
    padding: @view-header-padding;
  }

  .tox-view__toolbar__group {
    display: flex;
    flex-direction: row;
    gap: @view-toolbar-group-spacing-x; // minimal spacing between toolbar groups
  }

  .tox-view__header-start,
  .tox-view__header-end {
    display: flex;
  }

  .tox-view__pane {
    height: 100%;
    padding: @view-pane-padding;
    position: relative;
    width: 100%;
  }

  .tox-view__pane_panel {
    border: 1px solid @border-color;
    border-radius: @panel-border-radius;
  }
}

.tox:not([dir=rtl]) {
  .tox-view__header {
    .tox-view__header-start,
    .tox-view__header-end {
      > * {
        margin-left: @pad-sm;
      }
    }
  }
}

// RTL
.tox[dir=rtl] {
  .tox-view__header {
    .tox-view__header-start,
    .tox-view__header-end {
      > * {
        margin-right: @pad-sm;
      }
    }
  }
}