@import "./_mixins.less";

:host {
  --button-width: 30px;
  --button-height: 30px;
  --button-color: lightgray;
  --button-border: 2px;

  --active-tool-border: var(--button-border) solid transparent;
}

:host {
  position: relative;

  width: var(--button-width);
  height: var(--button-height);

  cursor: pointer;

  .no-user-select();
  touch-action: none;
}

.bk-tool-icon {
  position: relative;
  top: calc(var(--button-border)/2);
  width: calc(var(--button-width) - var(--button-border));
  height: calc(var(--button-height) - var(--button-border));

  mask-size: 60% 60%;
  mask-position: center center;
  mask-repeat: no-repeat;
  -webkit-mask-size: 60% 60%;
  -webkit-mask-position: center center;
  -webkit-mask-repeat: no-repeat;

  /* for PNG icons; remove when dropped */
  background-size: 60% 60%;
  background-origin: border-box;
  background-position: center center;
  background-repeat: no-repeat;
}

:host(.bk-disabled) {
  .bk-tool-icon {
    background-color: var(--icon-color-disabled);
    cursor: not-allowed;
  }
}

:host(.bk-hidden) {
  display: none;
}

.bk-count {
  position: absolute;
  top: 0;
  right: 0;

  --height: 1.1em;
  height: var(--height);
  line-height: var(--height); // needed for vertical alignment
  text-align: center;
  aspect-ratio: 1 / 1;
  font-size: 80%;
  border-radius: 50%;

  color: white;
  background-color: var(--icon-color);
}

.bk-tool-chevron {
  position: absolute;
  visibility: hidden;

  width: 8px;
  height: 8px;

  mask-size: 100% 100%;
  mask-position: center center;
  mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  -webkit-mask-position: center center;
  -webkit-mask-repeat: no-repeat;
}

:host(:hover) .bk-tool-chevron {
  visibility: visible;
}

:host(.bk-above) .bk-tool-chevron {
  right: 0;
  bottom: 0;
  .tool-icon-mask(var(--bokeh-icon-chevron-down));
}

:host(.bk-below) .bk-tool-chevron {
  right: 0;
  top: 0;
  .tool-icon-mask(var(--bokeh-icon-chevron-up));
}

:host(.bk-left) .bk-tool-chevron {
  right: 0;
  bottom: 0;
  .tool-icon-mask(var(--bokeh-icon-chevron-right));
}

:host(.bk-right) .bk-tool-chevron {
  left: 0;
  bottom: 0;
  .tool-icon-mask(var(--bokeh-icon-chevron-left));
}

:host(:hover) {
  background-color: rgba(192, 192, 192, 0.15);
}

:host(:focus), :host(:focus-visible) {
  outline: 1px dotted var(--highlight-color);
  outline-offset: -1px;
}

:host::-moz-focus-inner {
  border: 0;
}

.tool-button-border(@side) {
  border-@{side}: var(--active-tool-border);
}

.tool-button-border-active(@side) {
  border-@{side}-color: var(--highlight-color);
}

:host(.bk-above) {
  .tool-button-border(bottom);
}
:host(.bk-above.bk-active) {
  .tool-button-border-active(bottom);
}

:host(.bk-below) {
  .tool-button-border(top);
}
:host(.bk-below.bk-active) {
  .tool-button-border-active(top);
}

:host(.bk-right) {
  .tool-button-border(left);
}
:host(.bk-right.bk-active) {
  .tool-button-border-active(left);
}

:host(.bk-left) {
  .tool-button-border(right);
}
:host(.bk-left.bk-active) {
  .tool-button-border-active(right);
}
