/**
 * @prop --tct-context-close-icon-size: (<length>) Controls the size of the close icon in the affordance slot.
 * @prop --tct-context-background: (<color>) Controls the background color of the context container.
 * @prop --tct-context-color: (<color>) Controls the text color propagated to context items.
 * @prop --tct-context-backdrop-filter?: (*) Controls the optional backdrop-filter applied to the context container.
 * @prop --tct-context-border-color?: (<color>) Controls the optional border color of the context container.
 * @prop --tct-context-border-radius: (<length-percentage>) Controls the corner radius of the context container.
 * @prop --tct-context-border-style: (<custom-ident>) Controls the border style of the context container.
 * @prop --tct-context-border-width?: (<length>) Controls the optional border width of the context container.
 * @prop --tct-context-box-shadow?: (*) Controls the optional box shadow of the context container.
 * @prop --tct-context-gap: (<length-percentage>) Controls the gap between items within the context wrapper.
 * @prop --tct-context-padding: (<length-percentage>+) Controls the inner padding of the context container.
 * @prop --tct-context-separator-color: (<color>) Controls the color of the separator between context sections.
 * @prop --tct-context-separator-margin?: (<length-percentage>+) Controls the optional margin around the context separator.
 * @prop --tct-context-width?: (<length-percentage>) Controls the optional explicit width of the context container.
 */
* {
  box-sizing: border-box;
}

:host([hidden]) {
  display: none;
}

:host {
  --tct-item-body-color: var(--tct-context-color, var(--tct-text));
  display: block;
  background: var(--tct-context-background, var(--t-tertiary, #e8f5fc));
  box-shadow: var(--tct-context-box-shadow, none);
  backdrop-filter: var(--tct-context-backdrop-filter, none);
  border-radius: var(--tct-context-border-radius, var(--app-border-radius-2, 8px));
  padding: var(--tct-context-padding, 10px);
  width: var(--tct-context-width);
  border-width: var(--tct-context-border-width, 0px);
  border-style: var(--tct-context-border-style, solid);
  border-color: var(--tct-context-border-color, transparent);
}

.context-wrapper {
  display: flex;
  flex-direction: column;
  gap: var(--tct-context-gap, 10px);
}

.context-item {
  --tct-item-bullet-padding-top: 0;
  --tct-item-action-align-items: start;
  --tct-item-action-icon-height: 24px;
  --tct-item-action-icon-width: 24px;
  --tct-item-action-icon-size: 24px;
  --tct-item-avatar-height: 44px;
  --tct-item-avatar-width: 44px;
}

.context-body slot:not(:first-child)::before {
  content: " ";
}
.context-body ::slotted(*) {
  display: inline;
}

.separator {
  margin: var(--tct-context-separator-margin, 0);
  border-bottom: 1px solid var(--tct-context-separator-color, var(--t-gray-12, #d9d9d9));
}

.action-group {
  --tct-action-group-margin: 0;
}

::slotted(q2-dropdown) {
  --tct-btn-icon-border-radius: var(--app-border-radius-1, 4px);
}

::slotted(q2-btn[data-context-close-affordance]) {
  --tct-icon-size: var(--tct-context-close-icon-size, var(--const-px-18, 18px));
}

::slotted(q2-link) {
  --tct-link-border-radius: var(--app-border-radius-1, 4px);
  --tct-icon-stroke-primary: var(--t-primary, #6a4a9e);
  --tct-icon-stroke-secondary: var(--t-primary, #6a4a9e);
}