//
// Toolbar number input
//

@toolbar-number-input-button-width: 24px;
@toolbar-number-input-button-margin: 2px;
@toolbar-number-input-button-icon-ratio: .67;
@toolbar-number-input-input-wrapper-font-size: 14px;
@toolbar-number-input-input-wrapper-width: 60px;

.tox {
  .tox-number-input {
    background: @toolbar-button-bespoke-background-color;
    border-radius: @toolbar-button-border-radius;
    display: flex;
    margin: (@toolbar-button-spacing-y + 1px) @toolbar-button-spacing-x @toolbar-button-spacing-y 0;
    position: relative;
    width: auto;

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

    &:focus::after {
      .keyboard-focus-outline-mixin();
    }

    .tox-input-wrapper {
      display: flex;
      pointer-events: none;
      position: relative;
      text-align: center;

      &:focus {
        background-color: @toolbar-button-bespoke-focus-background-color;
        z-index: 1; // Ensure focus outline is on top of other buttons

        &::after {
          .keyboard-focus-outline-mixin();
        }
      }

      &:has(input:focus)::after {
        .keyboard-focus-outline-mixin();
      }
    }

    input {
      border-radius: @toolbar-button-border-radius;
      color: @toolbar-button-text-color;
      font-size: @toolbar-number-input-input-wrapper-font-size;
      margin: @toolbar-number-input-button-margin 0;
      pointer-events: all;
      position: relative;
      width: @toolbar-number-input-input-wrapper-width;

      &:hover {
        background: @toolbar-button-hover-background-color;
        color: @toolbar-button-hover-text-color;
      }

      &:focus {
        background-color: @toolbar-button-bespoke-focus-background-color;
      }

      &:disabled {
        background: @toolbar-button-disabled-background-color;
        border: @toolbar-button-disabled-border;
        box-shadow: @toolbar-button-disabled-box-shadow;
        color: @toolbar-button-disabled-text-color;
        cursor: not-allowed;
      }
    }

    button {
      color: @toolbar-button-text-color;
      height: @toolbar-button-height;
      position: relative;
      text-align: center;
      width: @toolbar-number-input-button-width;

      @media (forced-colors: active) {
        &:hover,
        &:focus,
        &:active {
          outline: 1px solid currentColor !important;
        }
      }

      svg {
        display: block;
        fill: @toolbar-button-icon-color;
        margin: 0 auto;
        transform: scale(@toolbar-number-input-button-icon-ratio);

        @media (forced-colors: active) {
          &,
          &:active,
          &:hover {
            fill: currentColor !important;
          }

          &:disabled {
            filter: contrast(0);
          }
        }
      }

      &:focus {
        background: @toolbar-button-bespoke-focus-background-color;
        z-index: 1; // Ensure focus outline is on top of other buttons

        &::after {
          .keyboard-focus-outline-mixin();
        }
      }

      &:hover {
        background: @toolbar-button-hover-background-color;
        border: @toolbar-button-hover-border;
        box-shadow: @toolbar-button-hover-box-shadow;
        color: @toolbar-button-hover-text-color;

        svg {
          fill: @toolbar-button-hover-icon-color;
        }
      }

      &:active {
        background: @toolbar-button-active-background-color;
        border: @toolbar-button-active-border;
        box-shadow: @toolbar-button-active-box-shadow;
        color: @toolbar-button-active-text-color;

        svg {
          fill: @toolbar-button-active-icon-color;
        }
      }

      &:disabled {
        background: @toolbar-button-disabled-background-color;
        border: @toolbar-button-disabled-border;
        box-shadow: @toolbar-button-disabled-box-shadow;
        color: @toolbar-button-disabled-text-color;
        cursor: not-allowed;

        svg {
          fill: @toolbar-button-disabled-icon-color;
        }
      }
    }

    button.minus {
      border-radius: @toolbar-button-border-radius 0 0 @toolbar-button-border-radius;
    }

    button.plus {
      border-radius: 0 @toolbar-button-border-radius @toolbar-button-border-radius 0;
    }
  }

  .tox-number-input:focus:not(:active) > button,
  .tox-number-input:focus:not(:active) > .tox-input-wrapper {
    background: @toolbar-button-bespoke-focus-background-color;
  }
}