@import "./_mixins.less";

:host {
  // The border opposite the divider
  --block-start-border-width: 3px;

  --close-icon-hover-background-color: var(--error);
  --close-icon-width: 14px;
  --close-icon-height: 14px;
  --close-icon-color: var(--icon-color);
  --close-icon-space-away-from-tab-text: 10px;

  --padding-vertical: 4px;
  --padding-horizontal: 8px;

  --outline-offset: -5px;

  --disabled-opacity: 0.65;
}

:host {
  display: grid;
}

:host(.bk-above) {
  grid-template:
    "header" max-content
    "stack"  1fr         / 1fr;
}

:host(.bk-below) {
  grid-template:
    "stack"  1fr
    "header" max-content / 1fr;
}

:host(.bk-left) {
  grid-template:
    "header stack" 1fr / max-content 1fr;
}

:host(.bk-right) {
  grid-template:
    "stack header" 1fr / 1fr max-content;
}

.bk-header {
  grid-area: "header";

  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;

  .no-user-select();
}

:host(.bk-above), :host(.bk-below) {
  .bk-header {
    flex-direction: row;
  }
}

:host(.bk-left), :host(.bk-right) {
  .bk-header {
    flex-direction: column;
  }
}

:host(.bk-above) .bk-header { border-bottom: var(--divider); }
:host(.bk-right) .bk-header { border-left:   var(--divider); }
:host(.bk-below) .bk-header { border-top:    var(--divider); }
:host(.bk-left)  .bk-header { border-right:  var(--divider); }

.bk-tab {
  padding: var(--padding-vertical) var(--padding-horizontal);
  border: var(--border-style) transparent;
  outline: 0;
  outline-offset: var(--outline-offset);
  white-space: nowrap;
  cursor: pointer;
  text-align: center;

  &:hover {
    background-color: var(--hover-color);
  }

  &:focus, &:active {
    outline: var(--outline);
  }

  &.bk-active {
    color: var(--color);
    background-color: var(--background-color);
    border-color: var(--border-color);
  }

  .bk-close {
    margin-left: var(--close-icon-space-away-from-tab-text);
  }

  &.bk-disabled { // TODO: same as elsewhere, so use a mixin
    cursor: not-allowed;
    pointer-events: none;
    opacity: var(--disabled-opacity);
  }
}

:host(.bk-above) .bk-tab {
  border-width: var(--block-start-border-width) var(--divider-width) 0 var(--divider-width);
  border-radius: var(--border-radius) var(--border-radius) 0 0;
}
:host(.bk-right) .bk-tab {
  border-width: var(--divider-width) var(--block-start-border-width) var(--divider-width) 0;
  border-radius: 0 var(--border-radius) var(--border-radius) 0;
}
:host(.bk-below) .bk-tab {
  border-width: 0 var(--divider-width) var(--block-start-border-width) var(--divider-width);
  border-radius: 0 0 var(--border-radius) var(--border-radius);
}
:host(.bk-left) .bk-tab {
  border-width: var(--divider-width) 0 var(--divider-width) var(--block-start-border-width);
  border-radius: var(--border-radius) 0 0 var(--border-radius);
}

.bk-close {
  display: inline-block;
  vertical-align: middle;
  width: var(--close-icon-width);
  height: var(--close-icon-height);
  cursor: pointer;

  .icon-mask(var(--bokeh-icon-x), var(--close-icon-color));

  &:hover {
    background-color: var(--close-icon-hover-background-color);
  }
}
