/* prettier-ignore */
:host {
  --bce-con1:var(--bce-con1-surface);
  --bce-con2:var(--bce-con2-surface);
  --bce-con3:var(--bce-con3-surface);
  --bce-con4:var(--bce-con4-surface);
  position: fixed;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  z-index: 64;
  display: none;
}
:host .backdrop {
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.6);
}
:host bce-form {
  --bce-c-surface:var(--bce-c024-surface);
  z-index: 24;
  box-shadow: 0 9px 46px 8px rgba(0, 0, 0, 0.14), 0 24px 38px 3px rgba(0, 0, 0, 0.12), 0 11px 15px -7px rgba(0, 0, 0, 0.4);
  position: absolute;
  padding: 24px;
  width: calc(100vw - 64px);
  max-width: 560px;
  border-radius: 4px;
  background-color: var(--bce-c-surface);
  color: var(--bce-con1-surface);
  pointer-events: auto;
}
:host bce-form .action-header {
  position: absolute;
  top: 2px;
  right: 2px;
}
:host bce-form .action-header bce-button {
  --bce-c300:var(--bce-c300-dark);
  --bce-c400:var(--bce-c400-dark);
  --bce-c500:var(--bce-c500-dark);
  --bce-c600:var(--bce-c600-dark);
  --bce-c700:var(--bce-c700-dark);
  --bce-con1:var(--bce-con1-dark);
  --bce-con2:var(--bce-con2-dark);
  --bce-con3:var(--bce-con3-dark);
  --bce-con4:var(--bce-con4-dark);
}
:host bce-form .action-bar {
  text-align: right;
  margin: 0 -16px -16px 0;
}

:host([active]) {
  display: flex;
  justify-content: center;
  align-items: center;
}

:host-context([color-scheme=dark]) bce-form bce-button {
  --bce-c300:var(--bce-c300-light);
  --bce-c400:var(--bce-c400-light);
  --bce-c500:var(--bce-c500-light);
  --bce-c600:var(--bce-c600-light);
  --bce-c700:var(--bce-c700-light);
  --bce-con1:var(--bce-con1-light);
  --bce-con2:var(--bce-con2-light);
  --bce-con3:var(--bce-con3-light);
  --bce-con4:var(--bce-con4-light);
}