//
// Toolbar number input
//

@toolbar-number-input-button-height: 28px;
@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 {
    border-radius: @toolbar-button-border-radius;
    display: flex;
    margin: (@toolbar-button-spacing-y + 1px) @toolbar-button-spacing-x @toolbar-button-spacing-y 0;
    padding: 0 @toolbar-button-select-padding;
    width: auto;

    .tox-input-wrapper {
      background: @toolbar-button-bespoke-background-color;
      display: flex;
      pointer-events: none;
      text-align: center;

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

    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;
      width: @toolbar-number-input-input-wrapper-width;

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

      &:focus {
        background: @color-white;
        color: @color-black;
      }
    }

    button {
      background: @toolbar-button-bespoke-background-color;
      color: @toolbar-button-text-color;
      height: @toolbar-number-input-button-height;
      text-align: center;
      width: @toolbar-number-input-button-width;

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

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

      &: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;
        }
      }
    }

    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-focus-background-color;
  }
}