//
// Toolbar split button
//

@toolbar-split-button-chevron-touch-padding: 4px;
@toolbar-split-color-preview-opacity: 0.3;

.tox {
  .tox-split-button {
    border: 0;
    border-radius: @toolbar-button-border-radius;
    box-sizing: border-box;
    display: flex;
    margin: (@toolbar-button-spacing-y + 1px) @toolbar-button-spacing-x @toolbar-button-spacing-y 0;
  }

  .tox-split-button:hover {
    box-shadow: 0 0 0 1px @toolbar-button-hover-background-color inset;
  }

  .tox-split-button:focus {
    background: @toolbar-button-focus-background-color;
    box-shadow: @toolbar-button-focus-box-shadow;
    color: @toolbar-button-focus-text-color;
    position: relative;
    z-index: 1; // Ensure focus outline is on top of other buttons

    &::after {
      pointer-events: none; // Prevent the focus outline from opening the menu
      .keyboard-focus-outline-mixin();
    }
  }

  .tox-split-button > * {
    border-radius: 0;

    // Cannot use first and last child selectors because of a hidden element
    // used for screen reader accessibility
    &:nth-child(1) {
      border-bottom-left-radius: @toolbar-button-border-radius;
      border-top-left-radius: @toolbar-button-border-radius;
    }

    &:nth-child(2) {
      border-bottom-right-radius: @toolbar-button-border-radius;
      border-top-right-radius: @toolbar-button-border-radius;
    }
  }

  .tox-split-button__chevron {
    width: @toolbar-button-chevron-width;
  }

  .tox-split-button__chevron svg {

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

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

  .tox-split-button .tox-tbtn {
    margin: 0;
  }

  .tox-split-button:focus .tox-tbtn {
    background-color: transparent; // Prevent the toolbar button background to cover the parent split button's background color
  }

  .tox-split-button.tox-tbtn--disabled:hover,
  .tox-split-button.tox-tbtn--disabled:focus,
  .tox-split-button.tox-tbtn--disabled .tox-tbtn:hover,
  .tox-split-button.tox-tbtn--disabled .tox-tbtn:focus {
    background: @toolbar-button-disabled-background-color;
    box-shadow: @toolbar-button-disabled-box-shadow;
    color: @toolbar-button-disabled-text-color;
  }

  // Increase the chevron size and decrease the button size on touch devices
  &.tox-platform-touch {
    .tox-split-button .tox-tbtn--select {
      padding: 0 (@toolbar-button-select-padding - @toolbar-split-button-chevron-touch-padding);
    }

    .tox-split-button .tox-tbtn:not(.tox-tbtn--select):first-child {
      width: @toolbar-button-width - @toolbar-split-button-chevron-touch-padding;
    }

    .tox-split-button__chevron {
      width: @toolbar-button-chevron-width + @toolbar-split-button-chevron-touch-padding;
    }
  }

  .tox-split-button.tox-tbtn--disabled svg .tox-icon-text-color__color,
  .tox-split-button.tox-tbtn--disabled svg .tox-icon-highlight-bg-color__color {
    opacity: @toolbar-split-color-preview-opacity;
  }
}
