@use '@mezzanine-ui/system/z-index';
@use '@mezzanine-ui/system/palette';
@use '@mezzanine-ui/system/spacing';
@use '@mezzanine-ui/system/effect' as effect;

@use './layout' as *;

.#{$prefix} {
  display: flex;
  flex-flow: row nowrap;

  &__navigation {
    position: sticky;
    top: 0;
    bottom: 0;
    left: 0;
    height: 100dvh;
    z-index: z-index.get(base);
  }

  &__content-wrapper {
    flex: 1;
    min-inline-size: 0;
    display: flex;
    flex-flow: row nowrap;
  }

  &__main {
    flex: 1;
    min-inline-size: spacing.semantic-variable(size, container, slim);
    overflow: hidden;

    &__content {
      min-inline-size: spacing.semantic-variable(size, container, expanded);
    }
  }

  &__side-panel {
    background-color: palette.semantic-variable('background', base);
    block-size: 100%;
    display: flex;
    flex-direction: row;
    flex-shrink: 0;
    min-inline-size: spacing.semantic-variable(size, container, slim);
  }

  &__side-panel-content {
    flex: 1 1 0;
    min-inline-size: 0;
    overflow: hidden;
  }

  &__divider {
    background-color: palette.semantic-variable(separator, neutral-faint);
    cursor: col-resize;
    flex-shrink: 0;
    inline-size: 1px;
    position: relative;
    z-index: z-index.get(base);

    &::before {
      content: '';
      inset-block: 0;
      // allow-hardcoded: column resize handle hit-area 向左偏 4px 讓觸擊範圍跨越 divider
      inset-inline-start: -4px;
      // allow-hardcoded: 9px 觸擊寬度（divider 1px 左右各 4px 擴充），不在 primitive scale
      inline-size: 9px;
      position: absolute;
    }

    &:focus-visible {
      box-shadow: effect.variable(focus, primary);
      outline: none;
    }

    &--dragging {
      background-color: palette.semantic-variable(separator, neutral-light);
    }
  }
}