/* 
 * Caution: "global styles" get injected into every component and can cause file size bloat.
 * These should only include SASS variables and mixins that are not written out to CSS directly
 */
:root {
  --cbp-dialog-color: var(--cbp-color-text-darkest);
  --cbp-dialog-color-dark: var(--cbp-color-text-lightest);
  --cbp-dialog-color-bg: var(--cbp-color-white);
  --cbp-dialog-color-bg-dark: var(--cbp-color-gray-cool-60);
  --cbp-dialog-padding: var(--cbp-space-5x);
  --cbp-dialog-border-radius: var(--cbp-border-radius-softer);
  --cbp-dialog-shadow: var(--cbp-shadow-level-5-center);
  --cbp-dialog-width: 20rem;
  --cbp-dialog-height: auto;
}

/* 
 * Dark Mode - display dark design based on mode or context
 */
[data-cbp-theme=light] cbp-dialog[context*=dark],
[data-cbp-theme=dark] cbp-dialog:not([context=dark-inverts]):not([context=light-always]) {
  --cbp-dialog-color: var(--cbp-dialog-color-dark);
  --cbp-dialog-color-bg: var(--cbp-dialog-color-bg-dark);
}

cbp-dialog {
  display: none;
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: var(--cbp-z-index-level-top);
  overflow: hidden;
  background-color: rgba(0, 0, 0, 0.3);
}
cbp-dialog[open] {
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}
cbp-dialog[color=danger] {
  --cbp-dialog-color-bg: var(--cbp-color-danger-lighter);
  --cbp-dialog-color-bg-dark: var(--cbp-color-danger-darker);
}
cbp-dialog div[role=dialog] {
  opacity: 1;
  display: flex;
  flex-direction: column;
  position: fixed;
  overflow-y: auto;
  z-index: var(--cbp-z-index-level-top);
  width: var(--cbp-dialog-width);
  height: var(--cbp-dialog-height);
  max-width: 100%;
  max-height: 90vh;
  box-shadow: var(--cbp-dialog-shadow);
  border-radius: var(--cbp-dialog-border-radius);
}
cbp-dialog div[role=dialog] .cbp-dialog-body {
  color: var(--cbp-dialog-color);
  background-color: var(--cbp-dialog-color-bg);
  padding: var(--cbp-dialog-padding);
  border-radius: var(--cbp-dialog-border-radius) var(--cbp-dialog-border-radius) 0 0;
}
cbp-dialog div[role=dialog] [slot=cbp-dialog-actions] {
  display: flex;
}
cbp-dialog div[role=dialog] [slot=cbp-dialog-actions] cbp-button {
  --cbp-button-border-radius: 0;
  width: 100%;
}
cbp-dialog div[role=dialog] [slot=cbp-dialog-actions] cbp-button:first-child {
  --cbp-button-border-radius: 0 0 0 var(--cbp-border-radius-softer);
}
cbp-dialog div[role=dialog] [slot=cbp-dialog-actions] cbp-button:last-child {
  --cbp-button-border-radius: 0 0 var(--cbp-border-radius-softer) 0;
}
cbp-dialog div[role=dialog] [slot=cbp-dialog-actions] cbp-button:first-child:last-child {
  --cbp-button-border-radius: 0 0 var(--cbp-border-radius-softer) var(--cbp-border-radius-softer);
}
cbp-dialog div[role=dialog] [slot=cbp-dialog-actions] cbp-button button,
cbp-dialog div[role=dialog] [slot=cbp-dialog-actions] cbp-button a {
  padding-block: var(--cbp-space-3x);
  width: 100%;
}

@media (max-width: 37.5em) {
  cbp-dialog[open] {
    align-items: end;
  }
  cbp-dialog div[role=dialog] {
    margin-bottom: var(--cbp-space-5x);
  }
}
@media print {
  cbp-dialog[open] div[role=dialog] {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: var(--cbp-z-index-level-top);
    background-color: var(--cbp-dialog-background-color);
  }
}