.xh-split-treemap {
  &__map-holder {
    flex-shrink: 0 !important;
    flex-basis: 10px !important;
  }

  &__header {
    padding: 0;
    align-items: center;
    flex: none;
    user-select: none;
    background-color: var(--xh-grid-header-bg);
    border-bottom: 1px solid var(--xh-grid-header-border-color);
    font-family: var(--xh-grid-header-font-family);
    font-weight: var(--xh-grid-header-font-weight);
    color: var(--xh-grid-header-text-color);
    -webkit-font-smoothing: antialiased;

    &__title {
      display: flex;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    // Vertical mode
    &.xh-split-treemap__header--vertical {
      flex-direction: column-reverse !important;
      justify-content: flex-end;

      .xh-split-treemap__header__title {
        writing-mode: vertical-lr;
        -ms-block-progression: lr;
        transform: rotate(180deg);
        width: calc(1em + 5px);
      }
    }
  }

  &__splitter {
    background-color: var(--xh-resizable-bg);

    &--vertical {
      height: 4px;
      border-top: var(--xh-resizable-border-width-px) solid var(--xh-resizable-border-color);
      border-bottom: var(--xh-resizable-border-width-px) solid var(--xh-resizable-border-color);
    }

    &--horizontal {
      width: 4px;
      border-left: var(--xh-resizable-border-width-px) solid var(--xh-resizable-border-color);
      border-right: var(--xh-resizable-border-width-px) solid var(--xh-resizable-border-color);
    }
  }

  &__mask-holder {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    background: var(--xh-bg);
    z-index: 20;
  }
}

// Standard Sizing Mode
.xh-standard .xh-split-treemap__header {
  font-size: var(--xh-grid-header-font-size-px);

  &.xh-split-treemap__header--horizontal {
    padding-left: var(--xh-grid-header-lr-pad-px);
  }

  &.xh-split-treemap__header--vertical {
    padding-top: var(--xh-grid-header-lr-pad-px);
  }
}

// Large Sizing Mode
.xh-large .xh-split-treemap__header {
  font-size: var(--xh-grid-large-header-font-size-px);

  &.xh-split-treemap__header--horizontal {
    padding-left: var(--xh-grid-large-header-lr-pad-px);
  }

  &.xh-split-treemap__header--vertical {
    padding-top: var(--xh-grid-large-header-lr-pad-px);
  }
}

// Compact Sizing Mode
.xh-compact .xh-split-treemap__header {
  font-size: var(--xh-grid-compact-header-font-size-px);

  &.xh-split-treemap__header--horizontal {
    padding-left: var(--xh-grid-compact-header-lr-pad-px);
  }

  &.xh-split-treemap__header--vertical {
    padding-top: var(--xh-grid-compact-header-lr-pad-px);
  }
}

// Tiny Sizing Mode
.xh-tiny .xh-split-treemap__header {
  font-size: var(--xh-grid-tiny-header-font-size-px);

  &.xh-split-treemap__header--horizontal {
    padding-left: var(--xh-grid-tiny-header-lr-pad-px);
  }

  &.xh-split-treemap__header--vertical {
    padding-top: var(--xh-grid-tiny-header-lr-pad-px);
  }
}