.scb-text-box {
  --scb-text-fill: #ffffff;
  --scb-text-outline: #111827;
  --scb-text-color: #111827;
  background: var(--scb-text-fill);
  border-color: var(--scb-text-outline);
  color: var(--scb-text-color);
}

.scb-text-content {
  min-height: 100%;
  outline: none;
  position: relative;
  z-index: 2;
}

.scb-text-box.has-tail::after,
.scb-text-box.has-tail::before {
  content: "";
  position: absolute;
  z-index: 1;
}

.scb-text-tail-bottom-left::before,
.scb-text-tail-bottom-right::before,
.scb-text-tail-top-left::before,
.scb-text-tail-top-right::before {
  border-style: solid;
  border-color: var(--scb-text-outline) transparent transparent transparent;
  border-width: 18px 10px 0 10px;
  bottom: -18px;
}

.scb-text-tail-bottom-left::after,
.scb-text-tail-bottom-right::after,
.scb-text-tail-top-left::after,
.scb-text-tail-top-right::after {
  border-style: solid;
  border-color: var(--scb-text-fill) transparent transparent transparent;
  border-width: 14px 8px 0 8px;
  bottom: -13px;
}

.scb-text-tail-bottom-left::before { left: 20%; transform: rotate(18deg); }
.scb-text-tail-bottom-left::after { left: calc(20% + 2px); transform: rotate(18deg); }
.scb-text-tail-bottom-right::before { right: 20%; transform: rotate(-18deg); }
.scb-text-tail-bottom-right::after { right: calc(20% + 2px); transform: rotate(-18deg); }

.scb-text-tail-top-left::before,
.scb-text-tail-top-right::before {
  border-color: transparent transparent var(--scb-text-outline) transparent;
  border-width: 0 10px 18px 10px;
  bottom: auto;
  top: -18px;
}

.scb-text-tail-top-left::after,
.scb-text-tail-top-right::after {
  border-color: transparent transparent var(--scb-text-fill) transparent;
  border-width: 0 8px 14px 8px;
  bottom: auto;
  top: -13px;
}

.scb-text-tail-top-left::before { left: 20%; transform: rotate(-18deg); }
.scb-text-tail-top-left::after { left: calc(20% + 2px); transform: rotate(-18deg); }
.scb-text-tail-top-right::before { right: 20%; transform: rotate(18deg); }
.scb-text-tail-top-right::after { right: calc(20% + 2px); transform: rotate(18deg); }

.scb-text-tail-thought-left::before,
.scb-text-tail-thought-right::before {
  background: var(--scb-text-outline);
  border-radius: 50%;
  bottom: -19px;
  height: 13px;
  width: 13px;
}

.scb-text-tail-thought-left::after,
.scb-text-tail-thought-right::after {
  background: var(--scb-text-fill);
  border: 2px solid var(--scb-text-outline);
  border-radius: 50%;
  bottom: -32px;
  height: 8px;
  width: 8px;
}

.scb-text-tail-thought-left::before { left: 22%; }
.scb-text-tail-thought-left::after { left: calc(22% - 12px); }
.scb-text-tail-thought-right::before { right: 22%; }
.scb-text-tail-thought-right::after { right: calc(22% - 12px); }

.scb-text-style-thought {
  border-radius: 999px;
  border-style: solid;
}

.scb-text-style-shout {
  clip-path: polygon(5% 12%, 14% 0, 25% 11%, 39% 0, 50% 10%, 64% 0, 76% 11%, 89% 0, 95% 15%, 100% 31%, 92% 44%, 100% 59%, 92% 75%, 96% 93%, 78% 88%, 67% 100%, 51% 90%, 36% 100%, 23% 89%, 5% 96%, 10% 77%, 0 64%, 8% 48%, 0 32%);
  border-radius: 0;
  padding: 14px 16px;
}

.scb-text-style-whisper {
  border-style: dashed;
  opacity: 0.92;
}

.scb-text-style-caption,
.scb-text-style-narration {
  border-radius: 3px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.scb-text-resize {
  background: var(--scb-accent);
  border: 2px solid #111827;
  border-radius: 50%;
  bottom: -9px;
  cursor: nwse-resize;
  display: none;
  height: 18px;
  position: absolute;
  right: -9px;
  width: 18px;
  z-index: 4;
}

.scb-text-box.is-selected .scb-text-resize {
  display: block;
}

.scb-text-resize::after {
  border-bottom: 2px solid #111827;
  border-right: 2px solid #111827;
  bottom: 4px;
  content: "";
  height: 5px;
  position: absolute;
  right: 4px;
  width: 5px;
}

.scb-text-control-grid {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: 10px;
}

.scb-text-control-grid .scb-field-full {
  grid-column: 1 / -1;
}

@media (max-width: 900px) {
  .scb-text-control-grid {
    grid-template-columns: 1fr;
  }
}