/* prettier-ignore */
:host {
  position: relative;
}

:host([design=card]) {
  --bce-con1:var(--bce-con1-surface);
  --bce-con2:var(--bce-con2-surface);
  --bce-con3:var(--bce-con3-surface);
  --bce-con4:var(--bce-con4-surface);
  --bce-c-surface:var(--bce-c001-surface);
  z-index: 1;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
  display: block;
  margin-bottom: 0.5rem;
  padding: 1rem;
  border-radius: 4px;
  background-color: var(--bce-c-surface);
  color: var(--bce-con1-surface);
}