@use '../abstract/index' as *;

.cover-frame {
  --p-cover-frame-bg-header: var(--transparent);

  display:flex; flex-direction:column;
  block-size:100vh; block-size:100lvh;
  &-header {
    padding-inline:pxToRem(32); padding-block:pxToRem(20); border-block-end:solid pxToRem(1) hsl(var(--color-border));
    background-color: hsl(var(--p-cover-frame-bg-header));
  }
  &-content {
    flex:1; padding:pxToRem(32); overflow:hidden;
  }

  /* state */
  &.is-color-header {
    --p-cover-frame-bg-header:var(--color-neutral-0);
    #{$theme-dark} & { --p-cover-frame-bg-header:var(--color-neutral-500); }
  }
}