:root {
  --oxs-shadow: 0 10px 28px rgba(0, 0, 0, 0.35);
  --oxs-ring: 0 0 0 1px var(--oxs-border);
  --oxs-pad-scale: 1;
  --oxs-font-size: calc(14px * var(--oxs-font-scale, 1));
}

:root[data-oxs-shadow='none'] {
  --oxs-shadow: none;
}

:root[data-oxs-shadow='soft'] {
  --oxs-shadow: 0 10px 28px rgba(0, 0, 0, 0.35);
}

:root[data-oxs-shadow='deep'] {
  --oxs-shadow: 0 20px 52px rgba(0, 0, 0, 0.55);
}

:root[data-oxs-density='compact'] {
  --oxs-pad-scale: 0.72;
}

:root[data-oxs-density='cozy'] {
  --oxs-pad-scale: 1;
}

:root[data-oxs-density='roomy'] {
  --oxs-pad-scale: 1.3;
}

:root[data-oxs-motion='off'] {
  --oxs-duration: 0ms;
}

:root[data-oxs-outline='none'] {
  --oxs-border-width: 0px;
}

:root[data-oxs-outline='dashed'] {
  --oxs-border-style: dashed;
}

:root {
  --oxs-border-style: solid;
  --oxs-pad-y: calc(var(--oxs-pad, 14px) * var(--oxs-pad-scale));
  --oxs-pad-x: calc(var(--oxs-pad, 14px) * var(--oxs-pad-scale));
  --oxs-line: var(--oxs-border-width, 1px) var(--oxs-border-style) var(--oxs-border);
  --oxs-line-strong: var(--oxs-border-width, 1px) var(--oxs-border-style) var(--oxs-border-strong);
}

:root[data-oxs-icon-accent='on'] {
  --oxs-icon-color: var(--oxs-accent);
}

:root[data-oxs-icons='none'] svg[data-icon],
:root[data-oxs-icons='none'] .oxs-icon {
  display: none !important;
}

:root[data-oxs-icons='material'] svg[data-icon] {
  display: none !important;
}

:root[data-oxs-icons='material'] [data-oxs-glyph]::before {
  content: attr(data-oxs-glyph);
  font-family: 'Material Symbols Rounded';
  font-weight: 400;
  font-size: var(--oxs-icon-size, 16px);
  line-height: 1;
  color: var(--oxs-icon-color);
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

.oxs-brand {
  display: flex;
  align-items: center;
  gap: calc(var(--oxs-gap, 8px) * 1.1);
  min-width: 0;
}

.oxs-brand-logo {
  width: var(--oxs-brand-size, 34px);
  height: var(--oxs-brand-size, 34px);
  object-fit: contain;
  border-radius: var(--oxs-radius-sm, 6px);
  flex: none;
}

.oxs-brand-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.oxs-brand-name {
  font-family: var(--oxs-font-heading), sans-serif;
  font-weight: var(--oxs-heading-weight, 600);
  text-transform: var(--oxs-heading-transform, none);
  letter-spacing: var(--oxs-heading-tracking, 0);
  font-size: calc(var(--oxs-font-size) * 1.02);
  color: var(--oxs-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.oxs-brand-tagline {
  font-family: var(--oxs-font-body), sans-serif;
  font-size: calc(var(--oxs-font-size) * 0.76);
  color: var(--oxs-text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

:root[data-oxs-brand='corner'] .oxs-brand {
  position: absolute;
  top: calc(var(--oxs-pad-y) * 0.6);
  right: calc(var(--oxs-pad-x) * 0.6);
  opacity: 0.85;
}

:root[data-oxs-brand='hidden'] .oxs-brand {
  display: none;
}

.oxs-banner {
  height: calc(var(--oxs-brand-size, 34px) * 2.2);
  margin-bottom: var(--oxs-gap, 8px);
  border-radius: var(--oxs-radius, 10px);
  background-position: center;
  background-size: var(--oxs-banner-fit, contain);
  background-repeat: no-repeat;
}