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

@toolbar-button-background-color: transparent;
@toolbar-button-border-radius: 3px;
@toolbar-button-border: 0;
@toolbar-button-box-shadow: none;
@toolbar-button-chevron-color: fade(@toolbar-button-icon-color, 50%);
@toolbar-button-chevron-width: @base-value;
@toolbar-button-font-size: @font-size-sm;
@toolbar-button-font-style: normal;
@toolbar-button-font-weight: @font-weight-normal;
@toolbar-button-height: 28px;
@toolbar-button-icon-color: contrast(@background-color, @color-white, @color-black);
@toolbar-button-spacing-x: 1px;
@toolbar-button-spacing-y: 5px;
@toolbar-button-text-color: contrast(@background-color, @color-white, @color-black);
@toolbar-button-text-transform: none;
@toolbar-button-width: 34px;

@toolbar-button-hover-background-color: multiply(white, contrast(@background-color, fade(@color-tint, 20), fade(@color-tint, 80)));
@toolbar-button-hover-border: @toolbar-button-border;
@toolbar-button-hover-box-shadow: @toolbar-button-box-shadow;
@toolbar-button-hover-icon-color: @toolbar-button-icon-color;
@toolbar-button-hover-text-color: @toolbar-button-text-color;

@toolbar-button-focus-background-color: @toolbar-button-hover-background-color;
@toolbar-button-focus-border: @toolbar-button-hover-border;
@toolbar-button-focus-box-shadow: @toolbar-button-hover-box-shadow;
@toolbar-button-focus-icon-color: @toolbar-button-hover-icon-color;
@toolbar-button-focus-text-color: @toolbar-button-hover-text-color;

@toolbar-button-active-background-color: @toolbar-button-enabled-background-color;
@toolbar-button-active-border: @toolbar-button-enabled-border;
@toolbar-button-active-box-shadow: @toolbar-button-box-shadow; // set to `0 1px 1px 0 rgba(0, 0, 0, .1) inset` for a small push in effect
@toolbar-button-active-icon-color: @toolbar-button-enabled-icon-color;
@toolbar-button-active-text-color: @toolbar-button-enabled-text-color;
@toolbar-button-active-transform: none; // Set to `translateY(1px)` for a small push down effect

@toolbar-button-enabled-background-color: multiply(white, contrast(@background-color, fade(@color-tint, 35), fade(@color-tint, 65)));
@toolbar-button-enabled-border: @toolbar-button-hover-border;
@toolbar-button-enabled-box-shadow: @toolbar-button-box-shadow;
@toolbar-button-enabled-icon-color: @toolbar-button-hover-icon-color;
@toolbar-button-enabled-text-color: @toolbar-button-hover-text-color;
@toolbar-button-enabled-transform: none;

@toolbar-button-disabled-background-color:  @toolbar-button-background-color;
@toolbar-button-disabled-border: @toolbar-button-border;
@toolbar-button-disabled-box-shadow: @toolbar-button-box-shadow;
@toolbar-button-disabled-icon-color: fade(@toolbar-button-icon-color, 50%);
@toolbar-button-disabled-text-color: fade(@toolbar-button-text-color, 50%);

.tox {
  .tox-tbtn {
    align-items: center;
    background: @toolbar-button-background-color;
    border: @toolbar-button-border;
    border-radius: @toolbar-button-border-radius;
    box-shadow: @toolbar-button-box-shadow;
    color: @toolbar-button-text-color;
    display: flex;
    flex: 0 0 auto;
    font-size: @toolbar-button-font-size;
    font-style: @toolbar-button-font-style;
    font-weight: @toolbar-button-font-weight;
    height: @toolbar-button-height;
    justify-content: center;
    margin: (@toolbar-button-spacing-y + 1px) @toolbar-button-spacing-x @toolbar-button-spacing-y 0;
    outline: none;
    overflow: hidden;
    padding: 0;
    text-transform: @toolbar-button-text-transform;
    width: @toolbar-button-width;

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

  // This class doesn't seem to be used anywhere.
  // The ruleset can probably be removed.
  .tox-tbtn.tox-tbtn-more {
    padding-left: 5px;
    padding-right: 5px;
    width: inherit;
  }

  .tox-tbtn:focus {
    background: @toolbar-button-focus-background-color;
    border: @toolbar-button-focus-border;
    box-shadow: @toolbar-button-focus-box-shadow;
  }

  .tox-tbtn: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;
    }
  }

  .tox-tbtn: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;
    }
  }

  .tox-tbtn--disabled,
  .tox-tbtn--disabled:hover,
  .tox-tbtn:disabled,
  .tox-tbtn:disabled:hover {
    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;

    // Disable stylelint below because we're mixing the :disabled modifier with the "--disabled" class
    // since they need to be kept the same/use the same rules
    svg { /* stylelint-disable-line no-descending-specificity */
      fill: @toolbar-button-disabled-icon-color;
    }
  }

  // An toggle on/off button's on state.
  .tox-tbtn--enabled,
  .tox-tbtn--enabled:hover {
    background: @toolbar-button-enabled-background-color;
    border: @toolbar-button-enabled-border;
    box-shadow: @toolbar-button-enabled-box-shadow;
    color: @toolbar-button-enabled-text-color;

    > * {
      transform: @toolbar-button-enabled-transform;
    }

    // Disable stylelint below because we're mixing the :hover modifier with the "--enabled" class
    // since they need to be kept the same/use the same rules
    svg { /* stylelint-disable-line no-descending-specificity */
      fill: @toolbar-button-enabled-icon-color;
    }
  }

  .tox-tbtn:focus:not(.tox-tbtn--disabled) {
    color: @toolbar-button-focus-text-color;

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

  .tox-tbtn:active > * {
    transform: @toolbar-button-active-transform;
  }

  .tox-tbtn--md {
    height: @toolbar-button-height * 1.5;
    width: @toolbar-button-width * 1.5;
  }

  .tox-tbtn--lg {
    flex-direction: column;
    height: @toolbar-button-height * 2;
    width: @toolbar-button-width * 2;
  }

  .tox-tbtn--return {
    align-self: stretch;
    height: unset;
    width: 16px;
  }

  // For buttons with text label before or after icon
  .tox-tbtn--labeled {
    padding: 0 4px;
    width: unset;
  }

  // Vertical label
  .tox-tbtn__vlabel {
    display: block;
    font-size: 10px;
    font-weight: @font-weight-normal;
    letter-spacing: -.025em;
    margin-bottom: @pad-xs;
    white-space: nowrap;
  }
}