/**
 * @prop --tct-surface-default-background: (<color>) Background color when background="default". Defaults to --t-base.
 * @prop --tct-surface-primary-background: (<color>) Background color when background="primary". Defaults to --t-primary.
 * @prop --tct-surface-secondary-background: (<color>) Background color when background="secondary". Defaults to --t-secondary.
 * @prop --tct-surface-tertiary-background: (<color>) Background color when background="tertiary". Defaults to --t-tertiary.
 * @prop --tct-surface-gray-background: (<color>) Background color when background="gray". Defaults to --t-base-gray1.
 * @prop --tct-surface-default-hover-background: (<color>) Hover background when clickable and background="default" (or unset). Defaults to --t-base-primary1.
 * @prop --tct-surface-primary-hover-background: (<color>) Hover background when clickable and background="primary". Defaults to --t-primary-d2.
 * @prop --tct-surface-secondary-hover-background: (<color>) Hover background when clickable and background="secondary". Defaults to --t-secondary-d2.
 * @prop --tct-surface-tertiary-hover-background: (<color>) Hover background when clickable and background="tertiary". Defaults to --t-tertiary-d2.
 * @prop --tct-surface-gray-hover-background: (<color>) Hover background when clickable and background="gray". Defaults to --t-base-primary1 (matches --tct-surface-default-hover-background).
 * @prop --tct-surface-default-active-background: (<color>) Active/pressed background when clickable and background="default" (or unset). Defaults to --t-base-primary2.
 * @prop --tct-surface-primary-active-background: (<color>) Active/pressed background when clickable and background="primary". Defaults to --t-primary-d3.
 * @prop --tct-surface-secondary-active-background: (<color>) Active/pressed background when clickable and background="secondary". Defaults to --t-secondary-d3.
 * @prop --tct-surface-tertiary-active-background: (<color>) Active/pressed background when clickable and background="tertiary". Defaults to --t-tertiary-d3.
 * @prop --tct-surface-gray-active-background: (<color>) Active/pressed background when clickable and background="gray". Defaults to --t-base-primary2 (matches --tct-surface-default-active-background).
 * @prop --tct-surface-primary-font-color: (<color>) Text color when background="primary". Defaults to --t-primary-text.
 * @prop --tct-surface-secondary-font-color: (<color>) Text color when background="secondary". Defaults to --t-secondary-text.
 * @prop --tct-surface-tertiary-font-color: (<color>) Text color when background="tertiary". Defaults to --t-tertiary-text.
 * @prop --tct-surface-default-border-color: (<color>) Border color when border="default". Defaults to --t-gray-12.
 * @prop --tct-surface-primary-border-color: (<color>) Border color when border="primary". Defaults to --t-primary.
 * @prop --tct-surface-secondary-border-color: (<color>) Border color when border="secondary" . Defaults to --t-secondary.
 * @prop --tct-surface-tertiary-border-color: (<color>) Border color when border="tertiary". Defaults to --t-tertiary.
 * @prop --tct-surface-gray-border-color: (<color>) Border color when border="gray". Defaults to --t-gray-8.
 * @prop --tct-surface-border-radius-1: (<length>) Corner radius at radius=1. Defaults to --app-border-radius-1 (4px).
 * @prop --tct-surface-border-radius-2: (<length>) Corner radius at radius=2. Defaults to --app-border-radius-2 (8px).
 * @prop --tct-surface-border-radius-3: (<length>) Corner radius at radius=3. Defaults to --app-border-radius-3 (12px).
 * @prop --tct-surface-border-radius-4: (<length>) Corner radius at radius=4. Defaults to --app-border-radius-4 (16px).
 * @prop --tct-surface-border-radius-5: (<length>) Corner radius at radius=5. Defaults to --app-border-radius-5 (24px).
 * @prop --tct-surface-elevation-1-box-shadow: (*) Box shadow at elevation=1.
 * @prop --tct-surface-elevation-2-box-shadow: (*) Box shadow at elevation=2.
 * @prop --tct-surface-elevation-3-box-shadow: (*) Box shadow at elevation=3.
 * @prop --tct-surface-elevation-4-box-shadow: (*) Box shadow at elevation=4.
 * @prop --tct-surface-elevation-5-box-shadow: (*) Box shadow at elevation=5.
 * @prop --tct-surface-elevation-hover-0-box-shadow: (*) Hover box shadow when clickable and elevation=0 or unset.
 * @prop --tct-surface-elevation-hover-1-box-shadow: (*) Hover box shadow when clickable and elevation=1.
 * @prop --tct-surface-elevation-hover-2-box-shadow: (*) Hover box shadow when clickable and elevation=2.
 * @prop --tct-surface-elevation-hover-3-box-shadow: (*) Hover box shadow when clickable and elevation=3.
 * @prop --tct-surface-elevation-hover-4-box-shadow: (*) Hover box shadow when clickable and elevation=4.
 * @prop --tct-surface-elevation-hover-5-box-shadow: (*) Hover box shadow when clickable and elevation=5.
 * @prop --tct-surface-inset-compact: (<length>) Padding when inset="compact". Defaults to --app-scale-1x (5px).
 * @prop --tct-surface-inset-normal: (<length>) Padding when inset="normal". Defaults to --app-scale-3x (15px).
 * @prop --tct-surface-inset-comfortable: (<length>) Padding when inset="comfortable". Defaults to --app-scale-5x (25px).
 * @prop --tct-surface-background-gradient-direction: (<angle> | <side-or-corner>) Gradient direction for background-gradient. Defaults to "to right bottom".
 * @prop --tct-surface-border-gradient-direction: (<angle> | <side-or-corner>) Gradient direction for border-gradient, overrides --tct-surface-background-gradient-direction. Defaults to "to right bottom".
 * @prop --tct-surface-focus-visible-box-shadow: (*) Focus ring box-shadow when clickable.
 * @prop --tct-surface-tween: (<time> <easing>) Transition timing for all animated properties.
 * @prop --tct-surface-animation-duration: (<time>) Duration of animate() animations. Defaults to 1s.
 */
:host {
  --comp-surface-bg: transparent;
  --comp-surface-hover-background: var(--tct-surface-default-hover-background, var(--t-base-primary1, #f2f2f2));
  --comp-surface-border-color: var(--tct-surface-default-border-color, var(--t-gray-12, #d9d9d9));
  --comp-surface-animation-duration: var(--tct-surface-animation-duration, 1s);
  --comp-surface-gradient-direction: var(--tct-surface-background-gradient-direction, to right bottom);
  --comp-surface-radius: 0px;
}

* {
  box-sizing: border-box;
}
*:active {
  outline: none;
}
*:focus-visible {
  outline: none;
}

::-moz-focus-inner {
  border: none;
}

:host {
  display: block;
  transition: box-shadow var(--tct-surface-tween, var(--app-tween-1, 0.2s ease)), border-radius var(--tct-surface-tween, var(--app-tween-1, 0.2s ease)), background var(--tct-surface-tween, var(--app-tween-1, 0.2s ease)), padding var(--tct-surface-tween, var(--app-tween-1, 0.2s ease));
}

.container {
  display: block;
  background: transparent;
  border-radius: var(--comp-surface-radius);
  transition: background var(--tct-surface-tween, var(--app-tween-1, 0.2s ease)), border-radius var(--tct-surface-tween, var(--app-tween-1, 0.2s ease)), box-shadow var(--tct-surface-tween, var(--app-tween-1, 0.2s ease));
}

:host([elevation="1"]) {
  box-shadow: var(--tct-surface-elevation-1-box-shadow, var(--app-shadow-1, 0px 0px 2px rgba(0, 0, 0, 0.12), 0px 2px 4px rgba(0, 0, 0, 0.14)));
}

:host([elevation="2"]) {
  box-shadow: var(--tct-surface-elevation-2-box-shadow, var(--app-shadow-2, 0px 0px 2px rgba(0, 0, 0, 0.12), 0px 4px 8px rgba(0, 0, 0, 0.14)));
}

:host([elevation="3"]) {
  box-shadow: var(--tct-surface-elevation-3-box-shadow, var(--app-shadow-3, 0px 0px 2px rgba(0, 0, 0, 0.12), 0px 8px 16px rgba(0, 0, 0, 0.14)));
}

:host([elevation="4"]) {
  box-shadow: var(--tct-surface-elevation-4-box-shadow, var(--app-shadow-4, 0px 0px 8px rgba(0, 0, 0, 0.12), 0px 14px 28px rgba(0, 0, 0, 0.14)));
}

:host([elevation="5"]) {
  box-shadow: var(--tct-surface-elevation-5-box-shadow, var(--app-shadow-5, 0px 0px 8px rgba(0, 0, 0, 0.12), 0px 32px 64px rgba(0, 0, 0, 0.14)));
}

:host([radius="1"]) {
  --comp-surface-radius: var(--tct-surface-border-radius-1, var(--app-border-radius-1, 4px));
  border-radius: var(--comp-surface-radius);
}

:host([radius="2"]) {
  --comp-surface-radius: var(--tct-surface-border-radius-2, var(--app-border-radius-2, 8px));
  border-radius: var(--comp-surface-radius);
}

:host([radius="3"]) {
  --comp-surface-radius: var(--tct-surface-border-radius-3, var(--app-border-radius-3, 12px));
  border-radius: var(--comp-surface-radius);
}

:host([radius="4"]) {
  --comp-surface-radius: var(--tct-surface-border-radius-4, var(--app-border-radius-4, 16px));
  border-radius: var(--comp-surface-radius);
}

:host([radius="5"]) {
  --comp-surface-radius: var(--tct-surface-border-radius-5, var(--app-border-radius-5, 24px));
  border-radius: var(--comp-surface-radius);
}

:host([background=default]),
:host([clickable]:not([clickable=false]):not([background])) {
  --comp-surface-bg: var(--tct-surface-default-background, var(--t-base, #ffffff));
  --comp-surface-hover-background: var(--tct-surface-default-hover-background, var(--t-base-primary1, #f2f2f2));
  --comp-surface-active-background: var(--tct-surface-default-active-background, var(--t-base-primary2, #e6e6e6));
}

:host([background=primary]) {
  --comp-surface-bg: var(--tct-surface-primary-background, var(--t-primary, #6a4a9e));
  --comp-surface-hover-background: var(--tct-surface-primary-hover-background, var(--t-primary-d2, #533978));
  --comp-surface-active-background: var(--tct-surface-primary-active-background, var(--t-primary-d3, #3d2a58));
  color: var(--tct-surface-primary-font-color, var(--t-primary-text, #ffffff));
}

:host([background=secondary]) {
  --comp-surface-bg: var(--tct-surface-secondary-background, var(--t-secondary, #b3c2cc));
  --comp-surface-hover-background: var(--tct-surface-secondary-hover-background, var(--t-secondary-d2, #8fa1ac));
  --comp-surface-active-background: var(--tct-surface-secondary-active-background, var(--t-secondary-d3, #6b7d88));
  color: var(--tct-surface-secondary-font-color, var(--t-secondary-text, #1a1a1a));
}

:host([background=tertiary]) {
  --comp-surface-bg: var(--tct-surface-tertiary-background, var(--t-tertiary, #e8f5fc));
  --comp-surface-hover-background: var(--tct-surface-tertiary-hover-background, var(--t-tertiary-d2, #b8dcef));
  --comp-surface-active-background: var(--tct-surface-tertiary-active-background, var(--t-tertiary-d3, #88c4e2));
  color: var(--tct-surface-tertiary-font-color, var(--t-tertiary-text, #1a1a1a));
}

:host([background=gray]) {
  --comp-surface-bg: var(--tct-surface-gray-background, var(--t-base-gray1, #f4f4f4));
  --comp-surface-hover-background: var(--tct-surface-gray-hover-background, var(--t-base-primary1, #f2f2f2));
  --comp-surface-active-background: var(--tct-surface-gray-active-background, var(--t-base-primary2, #e6e6e6));
}

:host([background]) .container,
:host([clickable]:not([clickable=false]):not([background])) .container {
  background: var(--comp-surface-bg);
}

:host([background-gradient]) .container {
  background: linear-gradient(in oklch var(--comp-surface-gradient-direction), color-mix(in oklab, var(--comp-surface-bg), white 40%), var(--comp-surface-bg));
}

:host([border]) .container {
  border: 1px solid var(--comp-surface-border-color);
}

:host([border=primary]) .container {
  border-color: var(--tct-surface-primary-border-color, var(--t-primary, #6a4a9e));
}

:host([border=secondary]) .container {
  border-color: var(--tct-surface-secondary-border-color, var(--t-secondary, #b3c2cc));
}

:host([border=tertiary]) .container {
  border-color: var(--tct-surface-tertiary-border-color, var(--t-tertiary, #e8f5fc));
}

:host([border=gray]) .container {
  border-color: var(--tct-surface-gray-border-color, var(--t-gray-8, #808080));
}

:host([border-gradient]) {
  padding: 2px;
}
:host([border-gradient]) .container {
  border-radius: calc(var(--comp-surface-radius) - 2px);
}
:host([border-gradient])[border] .container {
  border: none;
}

:host([border-gradient]:not([background])) {
  --comp-surface-bg: var(--tct-surface-default-background, var(--t-base, #ffffff));
}
:host([border-gradient]:not([background])) .container {
  background: var(--comp-surface-bg);
}

:host([border-gradient]:not([border])),
:host([border-gradient][border=default]) {
  background: linear-gradient(in oklch var(--tct-surface-border-gradient-direction, var(--tct-surface-background-gradient-direction, to right bottom)), color-mix(in oklab, var(--tct-surface-default-border-color, var(--t-gray-12, #d9d9d9)), white 40%), var(--tct-surface-default-border-color, var(--t-gray-12, #d9d9d9)));
}

:host([border-gradient][border=primary]) {
  background: linear-gradient(in oklch var(--tct-surface-border-gradient-direction, var(--tct-surface-background-gradient-direction, to right bottom)), color-mix(in oklab, var(--tct-surface-primary-border-color, var(--t-primary, #6a4a9e)), white 40%), var(--tct-surface-primary-border-color, var(--t-primary, #6a4a9e)));
}

:host([border-gradient][border=secondary]) {
  background: linear-gradient(in oklch var(--tct-surface-border-gradient-direction, var(--tct-surface-background-gradient-direction, to right bottom)), color-mix(in oklab, var(--tct-surface-secondary-border-color, var(--t-secondary, #b3c2cc)), white 40%), var(--tct-surface-secondary-border-color, var(--t-secondary, #b3c2cc)));
}

:host([border-gradient][border=tertiary]) {
  background: linear-gradient(in oklch var(--tct-surface-border-gradient-direction, var(--tct-surface-background-gradient-direction, to right bottom)), color-mix(in oklab, var(--tct-surface-tertiary-border-color, var(--t-tertiary, #e8f5fc)), white 40%), var(--tct-surface-tertiary-border-color, var(--t-tertiary, #e8f5fc)));
}

:host([border-gradient][border=gray]) {
  background: linear-gradient(in oklch var(--tct-surface-border-gradient-direction, var(--tct-surface-background-gradient-direction, to right bottom)), color-mix(in oklab, var(--tct-surface-gray-border-color, var(--t-gray-8, #808080)), white 40%), var(--tct-surface-gray-border-color, var(--t-gray-8, #808080)));
}

:host([inset=compact]) .container {
  padding: var(--tct-surface-inset-compact, var(--app-scale-1x, 5px));
}

:host([inset=normal]) .container {
  padding: var(--tct-surface-inset-normal, var(--app-scale-3x, 15px));
}

:host([inset=comfortable]) .container {
  padding: var(--tct-surface-inset-comfortable, var(--app-scale-5x, 25px));
}

:host([inset-x=none]) .container {
  padding-inline: 0;
}

:host([inset-x=compact]) .container {
  padding-inline: var(--tct-surface-inset-compact, var(--app-scale-1x, 5px));
}

:host([inset-x=normal]) .container {
  padding-inline: var(--tct-surface-inset-normal, var(--app-scale-3x, 15px));
}

:host([inset-x=comfortable]) .container {
  padding-inline: var(--tct-surface-inset-comfortable, var(--app-scale-5x, 25px));
}

:host([inset-y=none]) .container {
  padding-block: 0;
}

:host([inset-y=compact]) .container {
  padding-block: var(--tct-surface-inset-compact, var(--app-scale-1x, 5px));
}

:host([inset-y=normal]) .container {
  padding-block: var(--tct-surface-inset-normal, var(--app-scale-3x, 15px));
}

:host([inset-y=comfortable]) .container {
  padding-block: var(--tct-surface-inset-comfortable, var(--app-scale-5x, 25px));
}

:host([clickable]:not([clickable=false])) {
  cursor: pointer;
}
:host([clickable]:not([clickable=false])) .container:hover {
  background: var(--comp-surface-hover-background);
}
:host([clickable]:not([clickable=false])) .container:active {
  background: var(--comp-surface-active-background, var(--comp-surface-hover-background));
}
:host([clickable]:not([clickable=false]))[elevation="0"]:hover .container, :host([clickable]:not([clickable=false])):not([elevation]):hover .container {
  box-shadow: var(--tct-surface-elevation-hover-0-box-shadow, var(--app-shadow-1, 0px 0px 2px rgba(0, 0, 0, 0.12), 0px 2px 4px rgba(0, 0, 0, 0.14)));
}
:host([clickable]:not([clickable=false]))[elevation="1"]:hover .container {
  box-shadow: var(--tct-surface-elevation-hover-1-box-shadow, var(--app-shadow-2, 0px 0px 2px rgba(0, 0, 0, 0.12), 0px 4px 8px rgba(0, 0, 0, 0.14)));
}
:host([clickable]:not([clickable=false]))[elevation="2"]:hover .container {
  box-shadow: var(--tct-surface-elevation-hover-2-box-shadow, var(--app-shadow-3, 0px 0px 2px rgba(0, 0, 0, 0.12), 0px 8px 16px rgba(0, 0, 0, 0.14)));
}
:host([clickable]:not([clickable=false]))[elevation="3"]:hover .container {
  box-shadow: var(--tct-surface-elevation-hover-3-box-shadow, var(--app-shadow-4, 0px 0px 8px rgba(0, 0, 0, 0.12), 0px 14px 28px rgba(0, 0, 0, 0.14)));
}
:host([clickable]:not([clickable=false]))[elevation="4"]:hover .container {
  box-shadow: var(--tct-surface-elevation-hover-4-box-shadow, var(--app-shadow-5, 0px 0px 8px rgba(0, 0, 0, 0.12), 0px 32px 64px rgba(0, 0, 0, 0.14)));
}
:host([clickable]:not([clickable=false]))[elevation="5"]:hover .container {
  box-shadow: var(--tct-surface-elevation-hover-5-box-shadow, var(--app-shadow-5, 0px 0px 8px rgba(0, 0, 0, 0.12), 0px 32px 64px rgba(0, 0, 0, 0.14)));
}
:host([clickable]:not([clickable=false])) .container:focus-visible {
  outline: none;
  box-shadow: var(--tct-surface-focus-visible-box-shadow, var(--const-double-focus-ring, 0 0 0 2px var(--t-base), 0 0 0 4px var(--const-focus-color), 0 0 0 6px var(--t-base)));
}

@keyframes q2-surface-bounce {
  from, 20%, 53%, to {
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    transform: translate3d(0, 0, 0);
  }
  40%, 43% {
    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    transform: translate3d(0, -30px, 0) scaleY(1.1);
  }
  70% {
    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    transform: translate3d(0, -15px, 0) scaleY(1.05);
  }
  80% {
    transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    transform: translate3d(0, 0, 0) scaleY(0.95);
  }
  90% {
    transform: translate3d(0, -4px, 0) scaleY(1.02);
  }
}
@keyframes q2-surface-flash {
  from, 50%, to {
    opacity: 1;
  }
  25%, 75% {
    opacity: 0;
  }
}
@keyframes q2-surface-pulse {
  from {
    transform: scale3d(1, 1, 1);
  }
  50% {
    transform: scale3d(1.05, 1.05, 1.05);
  }
  to {
    transform: scale3d(1, 1, 1);
  }
}
@keyframes q2-surface-tada {
  from {
    transform: scale3d(1, 1, 1);
  }
  10%, 20% {
    transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -1deg);
  }
  30%, 50%, 70%, 90% {
    transform: scale3d(1.05, 1.05, 1.05) rotate3d(0, 0, 1, 1deg);
  }
  40%, 60%, 80% {
    transform: scale3d(1.05, 1.05, 1.05) rotate3d(0, 0, 1, -1deg);
  }
  to {
    transform: scale3d(1, 1, 1);
  }
}
:host(.q2-surface-animate-bounce) {
  animation: q2-surface-bounce var(--comp-surface-animation-duration) both;
  transform-origin: center bottom;
}

:host(.q2-surface-animate-flash) {
  animation: q2-surface-flash var(--comp-surface-animation-duration) both;
}

:host(.q2-surface-animate-pulse) {
  animation: q2-surface-pulse var(--comp-surface-animation-duration) both;
}

:host(.q2-surface-animate-tada) {
  animation: q2-surface-tada var(--comp-surface-animation-duration) both;
}

::slotted(:is(h1, h2, h3, h4):first-child) {
  margin-top: 0 !important;
}

::slotted(:is(q2-action-group):last-child) {
  margin-bottom: 0 !important;
}