calcite-shell-panel.scss

:host {
  @apply flex
    items-stretch
    flex-initial
    pointer-events-none;
  --calcite-shell-panel-detached-max-height: unset;
}

.container {
  @apply box-border
  flex
  items-stretch
  bg-transparent
  flex-auto
  pointer-events-none
  text-color-2
  text--1;

  * {
    @apply box-border;
  }
}

:host(:hover),
:host(:focus-within) {
  .separator:not(:hover):not(:focus) {
    @apply opacity-100;
    background-color: var(--calcite-ui-border-3);
  }
}

.separator {
  @apply absolute
  bg-transparent
  bottom-0
  flex
  h-full
  opacity-0
  pointer-events-auto
  top-0
  transition-default
  w-0.5
  z-10;
  cursor: col-resize;
  outline: none;
  &:hover {
    @apply opacity-100;
    background-color: var(--calcite-ui-border-2);
  }
  &:focus {
    @apply bg-brand opacity-100;
  }
}

:host([position="start"]) .separator {
  inset-inline-end: -2px;
}

:host([position="end"]) .separator {
  inset-inline-start: -2px;
}

::slotted(calcite-panel),
::slotted(calcite-flow) {
  @apply flex-auto h-full w-full;
  max-height: unset;
  max-width: unset;
}

::slotted(.calcite-match-height) {
  @apply flex flex-auto overflow-hidden;
}

.content {
  @apply items-stretch
  self-stretch
  bg-background
  flex
  p-0
  pointer-events-auto
  flex-col
  flex-nowrap;

  width: var(--calcite-shell-panel-width);
  max-width: var(--calcite-shell-panel-max-width);
  min-width: var(--calcite-shell-panel-min-width);
  transition: max-height $transition, max-width $transition;
}

.content__header {
  @apply flex
  flex-col
  flex-initial
  flex-nowrap
  items-stretch;
}

.content__body {
  @apply flex
  flex-auto
  flex-col
  overflow-hidden;
}

:host([width-scale="s"]) .content {
  --calcite-shell-panel-width: calc(var(--calcite-panel-width-multiplier) * 12vw);
  --calcite-shell-panel-max-width: calc(var(--calcite-panel-width-multiplier) * 300px);
  --calcite-shell-panel-min-width: calc(var(--calcite-panel-width-multiplier) * 150px);
}

:host([width-scale="m"]) .content {
  --calcite-shell-panel-width: calc(var(--calcite-panel-width-multiplier) * 20vw);
  --calcite-shell-panel-max-width: calc(var(--calcite-panel-width-multiplier) * 420px);
  --calcite-shell-panel-min-width: calc(var(--calcite-panel-width-multiplier) * 240px);
}

:host([width-scale="l"]) .content {
  --calcite-shell-panel-width: calc(var(--calcite-panel-width-multiplier) * 45vw);
  --calcite-shell-panel-max-width: calc(var(--calcite-panel-width-multiplier) * 680px);
  --calcite-shell-panel-min-width: calc(var(--calcite-panel-width-multiplier) * 340px);
}

:host([detached-height-scale="s"]) .content--detached {
  --calcite-shell-panel-detached-max-height: 40vh;
}

:host([detached-height-scale="m"]) .content--detached {
  --calcite-shell-panel-detached-max-height: 60vh;
}

:host([detached-height-scale="l"]) .content--detached {
  --calcite-shell-panel-detached-max-height: 80vh;
}

.content--detached {
  @apply rounded
  shadow-0
  h-auto
  overflow-hidden
  mt-2
  mb-auto
  mx-2;

  max-height: var(--calcite-shell-panel-detached-max-height);
  ::slotted(calcite-panel),
  ::slotted(calcite-flow) {
    max-height: unset;
  }
}

:host([position="start"]) .content--detached,
:host([position="end"]) .content--detached {
  ::slotted(calcite-panel),
  ::slotted(calcite-flow) {
    @apply border-none;
  }
}

.content[hidden] {
  @apply hidden;
}

slot[name="action-bar"]::slotted(calcite-action-bar),
.content ::slotted(calcite-flow),
.content ::slotted(calcite-panel) {
  @apply border border-color-3 border-solid;
}

:host([position="start"]) slot[name="action-bar"]::slotted(calcite-action-bar),
:host([position="start"]) .content ::slotted(calcite-flow),
:host([position="start"]) .content ::slotted(calcite-panel) {
  border-inline-start: none;
}

:host([position="end"]) slot[name="action-bar"]::slotted(calcite-action-bar),
:host([position="end"]) .content ::slotted(calcite-flow),
:host([position="end"]) .content ::slotted(calcite-panel) {
  border-inline-end: none;
}