@import "../lib/mixins";
@import "../lib/variables";

:host {
  display: block;
  padding: 0 $half-padding $half-padding $half-padding;
}
::slotted([slot='body']) {
  height: 100%;
}
.pragma-panel-bar-wrapper {
  height: 100%;
  width: 100%;
  overflow: hidden;
  border-radius: $default-border-radius;
  @include flex();
  @include flex-column();
  &:focus-within {
    box-shadow: 0 0.5rem 1rem 0 var(--color-shadow-10);
  }
}

.pragma-panel-bar-header {
  background: var(--color-ui-4);
  flex-shrink: 0;
  @include flex();
  padding: 0 $half-padding;
  box-shadow: inset 0 -0.065rem 0 0 var(--color-ui-2-50);
  box-sizing: border-box;
  max-height: 3rem;
  align-items: center;
  h2 {
    flex: 1;
    font-size: var(--font-size-base);
    margin: 0;
    line-height: 3rem;
  }
  button {
    margin: 0 $default-margin;
    line-height: 2rem;
    height: 2rem;
  }
  .pragma-panel-bar-actions {
    @include flex();
  }
}

.pragma-panel-bar-body {
  background: var(--color-ui-4);
  @include overflow-scroll(auto, touch);
  @include flex();
  @include flex-column();
  flex:1;
}

.pragma-panel-bar-footer {
  background: var(--color-ui-4);
  @include flex();
  @include flex-column();
}