.dash-box {
  --dash-box-dash-size: 0.5rem;
  --dash-box-gap-size: 0.5rem;
  --dash-box-background-color: #ebf8fb;
  --dash-box-color: #666;
  --dash-box-border-color: var(--brand-blue-secondary);
  --dash-box-border-radius: 0.75rem;
  --dash-box-border-width: 1px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--dash-box-color);
  border-radius: var(--dash-box-border-radius);
  background-color: var(--dash-box-background-color);
  position: relative;
  overflow: hidden;
}

.dash-box::before {
  --dash-pattern: calc(var(--dash-box-dash-size) + var(--dash-box-gap-size));
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(to right, var(--dash-box-border-color) 0 var(--dash-box-dash-size), transparent var(--dash-box-dash-size) var(--dash-pattern)) top left / 100% var(--dash-box-border-width) no-repeat, repeating-linear-gradient(to bottom, var(--dash-box-border-color) 0 var(--dash-box-dash-size), transparent var(--dash-box-dash-size) var(--dash-pattern)) top right / var(--dash-box-border-width) 100% no-repeat, repeating-linear-gradient(to right, var(--dash-box-border-color) 0 var(--dash-box-dash-size), transparent var(--dash-box-dash-size) var(--dash-pattern)) bottom left / 100% var(--dash-box-border-width) no-repeat, repeating-linear-gradient(to bottom, var(--dash-box-border-color) 0 var(--dash-box-dash-size), transparent var(--dash-box-dash-size) var(--dash-pattern)) top left / var(--dash-box-border-width) 100% no-repeat;
}