calcite-shell.scss

/**
 * CSS Custom Properties
 *
 * These properties can be overridden using the component's tag as selector.
 *
 * @prop --calcite-shell-tip-spacing: the left/right positioning of the tip-manager when slotted within a shell
 */

:host {
  @extend %component-host;
  @apply w-full
    h-full
    absolute
    flex
    flex-col
    overflow-hidden
    inset-0;
  --calcite-shell-tip-spacing: 26vw;
}

.main {
  @apply h-full
    w-full
    flex-auto
    flex
    flex-row
    relative
    justify-between
    overflow-hidden;
}

.main--reversed {
  @apply flex-row-reverse;
}

.content {
  @apply flex
    flex-col
    flex-nowrap
    h-full
    overflow-auto
    w-full;
}

.content ::slotted(calcite-shell-center-row),
.content ::slotted(calcite-panel),
.content ::slotted(calcite-flow) {
  @apply self-stretch flex-auto;
  max-height: unset;
}

.content--behind {
  @apply border-0
    absolute
    inset-0
    z-0;
  display: initial;
}

::slotted(calcite-shell-center-row) {
  width: unset;
}

::slotted(.header .heading) {
  @apply font-normal text--2-wrap;
}

::slotted(calcite-shell-panel),
::slotted(calcite-shell-center-row) {
  @apply relative;
  z-index: 1;
}

::slotted(calcite-panel),
::slotted(calcite-flow) {
  @apply border
  border-color-3
  border-solid
  border-l-0
  border-r-0;
}

slot[name="center-row"]::slotted(calcite-shell-center-row:not([detached])) {
  @apply border-l border-r border-color-3;
}

::slotted(calcite-tip-manager) {
  @apply rounded
  shadow-2
  absolute
  animate-in-up
  box-border;
  bottom: theme("spacing.2");
  left: var(--calcite-shell-tip-spacing);
  right: var(--calcite-shell-tip-spacing);
  z-index: 2;
}