/* prettier-ignore */
:host {
  --bce-c300:var(--bce-c300-primary);
  --bce-c400:var(--bce-c400-primary);
  --bce-c500:var(--bce-c500-primary);
  --bce-c600:var(--bce-c600-primary);
  --bce-c700:var(--bce-c700-primary);
  --bce-con1:var(--bce-con1-primary);
  --bce-con2:var(--bce-con2-primary);
  --bce-con3:var(--bce-con3-primary);
  --bce-con4:var(--bce-con4-primary);
  position: relative;
  display: block;
  margin: 0 0 32px;
}

:host([editor]) .head {
  position: relative;
  padding: 16px 16px 4px 0;
  cursor: move;
}
:host([editor]) .head > bce-icon {
  margin: 0 10px;
}
:host([editor]) .head > label {
  flex: 1 0 auto;
}
:host([editor]) .head > bce-menu {
  position: absolute;
  top: 5px;
  right: 5px;
}
:host([editor]) > :last-child {
  position: relative;
  display: block;
  padding: 4px 16px;
}

:host([editor][focus]) {
  --bce-c-surface:var(--bce-c002-surface);
  z-index: 2;
  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -2px rgba(0, 0, 0, 0.2);
}
:host([editor][focus]) > :first-child {
  color: var(--bce-c500);
}