@import "./_mixins.less";

:host {
  --bokeh-bg-color: var(--background-color);
  --bokeh-border-color: var(--divider-color);
  --bokeh-shadow-color: var(--divider-color);
  --bokeh-ctrl-size: 16px;
  --bokeh-ctrl-color: var(--shortcut-color);
}

:host {
  position: fixed;
  left: 200px;
  top: 200px;
  width: 600px;
  height: 600px;
  width: 80vw;
  height: 60vh;
}

:host(.bk-interacting) {
  opacity: 0.9;
}

.bk-inner {
  position: relative;
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: 4px;
  background-color: var(--bokeh-bg-color);
  border: 1px solid var(--bokeh-border-color);
  box-shadow: 5px 5px 10px var(--bokeh-shadow-color);
}

.bk-header {
  position: relative;
  display: flex;
  flex: 0;
  gap: 1em;
  padding: 5px;
  background-color: var(--border-color);
}

.bk-content {
  position: relative;
  display: flex;
  flex: 1;
  overflow: auto;
}

:host(.bk-collapsed), :host(.bk-minimized) {
  .bk-content, .bk-footer {
    display: none;
  }
}

.bk-footer {
  position: relative;
  display: flex;
  flex: 0;
}

.bk-grip {
  width: var(--bokeh-ctrl-size);
  height: var(--bokeh-ctrl-size);
  background-color: var(--bokeh-ctrl-color);
  .icon-mask(var(--bokeh-icon-y-grip), var(--color));
}

.bk-title {
  position: relative;
  display: flex;
  flex: 1;
  cursor: move;
  white-space: nowrap;
}

.bk-controls {
  position: relative;
  display: flex;
  flex: 0;
}

.bk-ctrl {
  width: var(--bokeh-ctrl-size);
  height: var(--bokeh-ctrl-size);
  cursor: pointer;

  .mask-size(100% 100%);
  .mask-position(center center);
  .mask-repeat(no-repeat);

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

.bk-pin {
  .mask-image(var(--bokeh-icon-pin));
}
:host(.bk-pinned) {
  .bk-pin {
    .mask-image(var(--bokeh-icon-unpin));
  }
}
.bk-collapse {
  .mask-image(var(--bokeh-icon-chevron-up));
}
:host(.bk-collapsed) {
  .bk-collapse {
    .mask-image(var(--bokeh-icon-chevron-down));
  }
}
.bk-minimize {
  .mask-image(var(--bokeh-icon-arrow-down-to-bar))
}
:host(.bk-minimized) {
  .bk-minimize {
    .mask-image(var(--bokeh-icon-arrow-up-from-bar))
  }
}
.bk-maximize {
  .mask-image(var(--bokeh-icon-maximize));
}
:host(.bk-maximized) {
  .bk-maximize {
    .mask-image(var(--bokeh-icon-minimize))
  }
}
.bk-close {
  .mask-image(var(--bokeh-icon-x));
}

:host {
  // TODO: make these grab areas bigger for accessibility
  --resize-radius: 3px;
  --resize-depth: calc(2*var(--resize-radius));
}

:host(.bk-minimized) {
  position: relative;
}

:host(.bk-minimized), :host(.bk-maximized) {
  .bk-handle {
    display: none;
  }
  .bk-title {
    cursor: default;
  }
}

.bk-resize-top {
  position: absolute;
  top: 0;
  left: var(--resize-radius);
  width: calc(100% - var(--resize-depth));
  height: var(--resize-depth);
  transform: translate(0, -50%);
  cursor: ns-resize;
}
.bk-resize-bottom {
  position: absolute;
  bottom: 0;
  left: var(--resize-radius);
  width: calc(100% - var(--resize-depth));
  height: var(--resize-depth);
  transform: translate(0, 50%);
  cursor: ns-resize;
}
.bk-resize-left {
  position: absolute;
  left: 0;
  top: var(--resize-radius);
  width: var(--resize-depth);
  height: calc(100% - var(--resize-depth));
  transform: translate(-50%, 0);
  cursor: ew-resize;
}
.bk-resize-right {
  position: absolute;
  right: 0;
  top: var(--resize-radius);
  width: var(--resize-depth);
  height: calc(100% - var(--resize-depth));
  transform: translate(50%, 0);
  cursor: ew-resize;
}

.bk-resize-top-left {
  position: absolute;
  top: 0;
  left: 0;
  width: var(--resize-depth);
  height: var(--resize-depth);
  transform: translate(-50%, -50%);
  cursor: nw-resize;
}
.bk-resize-top-right {
  position: absolute;
  top: 0;
  right: 0;
  width: var(--resize-depth);
  height: var(--resize-depth);
  transform: translate(50%, -50%);
  cursor: ne-resize;
}
.bk-resize-bottom-left {
  position: absolute;
  bottom: 0;
  left: 0;
  width: var(--resize-depth);
  height: var(--resize-depth);
  transform: translate(-50%, 50%);
  cursor: sw-resize;
}
.bk-resize-bottom-right {
  position: absolute;
  bottom: 0;
  right: 0;
  width: var(--resize-depth);
  height: var(--resize-depth);
  transform: translate(50%, 50%);
  cursor: se-resize;
}
