/*
 * This file belongs to Hoist, an application development toolkit
 * developed by Extremely Heavy Industries (www.xh.io | info@xh.io)
 *
 * Copyright © 2026 Extremely Heavy Industries Inc.
 */

.xh-dock-container {
  position: absolute !important;
  bottom: 0;
  left: 0;
  right: 0;
  pointer-events: none;
  align-items: flex-end;
  justify-content: flex-end;
  z-index: 21;

  &--ltr {
    flex-direction: row-reverse !important;

    .xh-dock-view {
      margin-left: var(--xh-pad-px);
    }
  }

  &--rtl {
    flex-direction: row !important;

    .xh-dock-view {
      margin-right: var(--xh-pad-px);
    }
  }

  > .xh-modal-support__inline {
    // Don't flex-shrink docked dock views, allowing them to clip the container.
    flex: none;
    // Workaround for this class getting `width: 100%` for 1 frame while waiting for
    // an observable ref. See ModalSupport.js.
    width: auto !important;
  }
}

.xh-dock-view {
  display: flex;
  flex: 0 0 auto;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
  pointer-events: auto;

  &__header {
    position: relative;
    height: var(--xh-title-height-px);
    color: var(--xh-title-text-color);
    background-color: var(--xh-title-bg);
    border-top-right-radius: var(--xh-border-radius-px);
    border-top-left-radius: var(--xh-border-radius-px);

    &__inner {
      padding: var(--xh-title-pad-px);
      height: var(--xh-title-height-px);
      align-items: center;
    }

    &__icon {
      margin: 0 6px 0 2px;
    }

    &__title {
      font-size: var(--xh-title-font-size-px);
      margin-right: var(--xh-pad-px);
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }

    &--compact {
      height: var(--xh-title-compact-height-px);

      .xh-dock-view__header__inner {
        height: var(--xh-title-compact-height-px);
        padding: 0 0 0 var(--xh-pad-half-px);
      }

      .xh-dock-view__header__title {
        font-size: var(--xh-title-compact-font-size-px);
      }
    }

    // Extra specificity needed here to overcome the specificity in Button.scss.
    .xh-button.bp6-button {
      &.xh-button--minimal {
        &.xh-button--intent-none {
          &.xh-button--enabled {
            font-size: var(--xh-title-font-size-px);
            color: var(--xh-popup-title-text-color);
          }
        }
      }
    }
  }

  &:not(&--collapsed) &__header__inner {
    // Use absolute positioning to take the inner header out of flex consideration
    position: absolute !important;
    top: 0;
    left: 0;
    right: 0;
  }

  &__body {
    flex: 1;
    background-color: var(--xh-bg);
    border: var(--xh-border-solid);
    border-width: 0 1px;
  }

  &--collapsed &__body {
    display: none;
  }

  &--dialog {
    width: auto;

    .xh-dock-view__body {
      border-bottom-right-radius: var(--xh-border-radius-px);
      border-bottom-left-radius: var(--xh-border-radius-px);
      overflow: hidden;
    }
  }
}