:host {
  --container-header-padding: var(--spacing-4, 1rem);
  --container-footer-padding: var(--spacing-4, 1rem);
  --container-header-background-color: var(--color-background-surface-header, #172635);
  /**
   * @prop --body-padding: the container's body padding
   */
  --body-padding: var(--spacing-4, 1rem);
  display: block;
}

* {
  scrollbar-color: var(--color-border-interactive-muted, #2b659b) var(--color-background-surface-default, #1b2d3e);
  /* visually "centers" because the dark edge of the shadow gives the illusion this is offset */
}
*::-webkit-scrollbar {
  width: var(--spacing-4, 1rem);
  height: var(--spacing-4, 1rem);
  background-color: transparent;
}
*::-webkit-scrollbar-thumb {
  background-color: var(--color-border-interactive-muted, #2b659b);
  border-radius: 8px;
  border: 3px solid transparent;
  background-clip: padding-box;
}
*::-webkit-scrollbar-thumb:vertical {
  border-left-width: var(--border-width-lg, 4px);
}
*::-webkit-scrollbar-thumb:horizontal {
  border-top-width: var(--border-width-lg, 4px);
}
*::-webkit-scrollbar-thumb:active, *::-webkit-scrollbar-thumb:hover {
  background-color: var(--color-background-interactive-default, #3a81bf);
}
*::-webkit-scrollbar-track, *::-webkit-scrollbar-corner {
  background-color: var(--color-background-surface-default, #1b2d3e);
  box-shadow: var(--scrollbar-shadow-inner-vertical, inset 3px 3px 3px 0px rgba(0, 0, 0, 0.5));
}
*::-webkit-scrollbar-track:vertical {
  box-shadow: var(--scrollbar-shadow-inner-vertical, inset 3px 3px 3px 0px rgba(0, 0, 0, 0.5));
}
*::-webkit-scrollbar-track:horizontal {
  box-shadow: var(--scrollbar-shadow-inner-vertical, inset 3px 3px 3px 0px rgba(0, 0, 0, 0.5));
}

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

.rux-container {
  background: var(--color-background-surface-default, #1b2d3e);
  border: 1px solid var(--container-color-border, #000000);
}

.rux-container__header {
  padding: var(--container-header-padding);
  background: var(--color-background-surface-header, #172635);
  font-family: var(--font-heading-2-font-family, 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif);
  font-size: var(--font-heading-2-font-size, 1.5rem);
  font-weight: var(--font-heading-2-font-weight, 400);
  letter-spacing: var(--font-heading-2-letter-spacing, 0em);
  line-height: var(--font-heading-2-line-height, calc(28 / 24));
  text-align: left;
}

.rux-container__tab-bar {
  background: var(--color-background-surface-header, #172635);
  padding: 0 var(--spacing-4, 1rem) calc(var(--spacing-1, 0.25rem) + 2px) var(--spacing-4, 1rem);
}

.rux-container__tab-bar-compact {
  padding: 0;
}

.rux-container__toolbar {
  background: var(--color-background-surface-header, #172635);
  padding: var(--container-header-padding);
}

.rux-container__body {
  padding: var(--body-padding);
  font-family: var(--font-body-1-font-family, 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif);
  font-size: var(--font-body-1-font-size, 1rem);
  font-weight: var(--font-body-1-font-weight, 400);
  line-height: var(--font-body-1-line-height, calc(24 / 16));
  letter-spacing: var(--font-body-1-letter-spacing, 0.005em);
  text-align: left;
}

.rux-container__footer {
  background: var(--color-background-surface-default, #1b2d3e);
  padding: var(--container-footer-padding);
  font-family: var(--font-body-1-font-family, 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif);
  font-size: var(--font-body-1-font-size, 1rem);
  font-weight: var(--font-body-1-font-weight, 400);
  line-height: var(--font-body-1-line-height, calc(24 / 16));
  letter-spacing: var(--font-body-1-letter-spacing, 0.005em);
  text-align: left;
}