//
// Toolbar select button
// When making changes here, please review menubar/menubar.less and menubar/menubar-button.less
//

@toolbar-button-bordered: @border-color;
@toolbar-button-select-padding: 4px;
@toolbar-button-bespoke-background-color: contrast(@background-color, darken(@background-color, 3%), lighten(@background-color, 7%));
@toolbar-button-bespoke-focus-background-color: @toolbar-button-bespoke-background-color;
@toolbar-button-bespoke-label-max-width: 7em;
@toolbar-button-bespoke-spacing-x: 4px;

.tox {
  .tox-tbtn--select {
    margin: (@toolbar-button-spacing-y + 1px) @toolbar-button-spacing-x @toolbar-button-spacing-y 0;
    padding: 0 @toolbar-button-select-padding;
    width: auto;
  }

  .tox-tbtn--bordered, .tox-tbtn--bordered:focus, .tox-tbtn--bordered:hover {
    border: 1px solid @toolbar-button-bordered;
  }

  .tox-tbtn__select-label {
    cursor: default;
    font-weight: @toolbar-button-font-weight;
    height: initial;
    margin: 0 4px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .tox-tbtn__select-chevron {
    align-items: center;
    display: flex;
    justify-content: center;
    width: @toolbar-button-chevron-width;
  }

  .tox-tbtn__select-chevron svg {

    @media (forced-colors: active) {
      fill: currentColor;
    }

    fill: @toolbar-button-chevron-color;
  }

  // Make dynamic text labeled buttons fixed width to prevent them from
  // jumping around when the content changes.
  .tox-tbtn--bespoke {
    background: @toolbar-button-bespoke-background-color;

    &:focus {
      background: @toolbar-button-bespoke-focus-background-color; // Prevent toolbar button focus background to override bespoke background
    }

    & + .tox-tbtn--bespoke {
      margin-inline-start: @toolbar-button-bespoke-spacing-x;
    }

    .tox-tbtn__select-label {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      width: @toolbar-button-bespoke-label-max-width;
    }
  }

  .tox-tbtn--disabled .tox-tbtn__select-label,
  .tox-tbtn--select:disabled .tox-tbtn__select-label {
    cursor: not-allowed;
  }
}