:host {
  display: contents;
}

*,
*::before,
*::after {
  box-sizing: inherit;
}

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

.rux-button-group {
  margin-left: auto;
}

.rux-button-group rux-button:first-of-type {
  margin-right: var(--spacing-2, 0.5rem);
}

.rux-dialog__wrapper {
  position: fixed;
  top: var(--spacing-0, 0rem);
  left: var(--spacing-0, 0rem);
  height: 100vh;
  width: 100vw;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1100;
  background-color: rgba(0, 0, 0, 0.5);
  animation: fadeIn 0.5s;
  -webkit-animation: fadeIn 0.5s;
  -moz-animation: fadeIn 0.5s;
  -o-animation: fadeIn 0.5s;
  -ms-animation: fadeIn 0.5s;
}
.rux-dialog__dialog {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background-color: var(--color-background-surface-default, #1b2d3e);
  width: 28rem;
  border: var(--spacing-0, 0rem);
  margin: auto;
  padding: var(--spacing-0, 0rem);
  user-select: none;
  box-shadow: var(--shadow-outer-dialog);
  max-height: 100%;
}
.rux-dialog__header {
  box-sizing: border-box;
  display: flex;
  flex-grow: var(--spacing-0, 0rem);
  flex-shrink: var(--spacing-0, 0rem);
  align-items: center;
  width: 100%;
  padding: var(--spacing-4, 1rem);
  background-color: var(--color-background-surface-header, #172635);
  color: var(--color-text-primary, #ffffff);
  user-select: none;
  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);
  line-height: var(--font-heading-2-line-height, calc(28 / 24));
  font-weight: var(--font-heading-2-font-weight, 400);
  letter-spacing: var(--font-heading-2-letter-spacing, 0em);
}
.rux-dialog__header ::slotted(h6),
.rux-dialog__header ::slotted(h5),
.rux-dialog__header ::slotted(h4),
.rux-dialog__header ::slotted(h3),
.rux-dialog__header ::slotted(h2),
.rux-dialog__header ::slotted(h1) {
  margin-block-start: var(--spacing-0, 0rem);
  margin-block-end: var(--spacing-0, 0rem);
}
.rux-dialog__content {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  color: var(--color-text-primary, #ffffff);
  overflow: auto;
  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 */
}
.rux-dialog__content::-webkit-scrollbar {
  width: var(--spacing-4, 1rem);
  height: var(--spacing-4, 1rem);
  background-color: transparent;
}
.rux-dialog__content::-webkit-scrollbar-thumb {
  background-color: var(--color-border-interactive-muted, #2b659b);
  border-radius: 8px;
  border: 3px solid transparent;
  background-clip: padding-box;
}
.rux-dialog__content::-webkit-scrollbar-thumb:vertical {
  border-left-width: var(--border-width-lg, 4px);
}
.rux-dialog__content::-webkit-scrollbar-thumb:horizontal {
  border-top-width: var(--border-width-lg, 4px);
}
.rux-dialog__content::-webkit-scrollbar-thumb:active, .rux-dialog__content::-webkit-scrollbar-thumb:hover {
  background-color: var(--color-background-interactive-default, #3a81bf);
}
.rux-dialog__content::-webkit-scrollbar-track, .rux-dialog__content::-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));
}
.rux-dialog__content::-webkit-scrollbar-track:vertical {
  box-shadow: var(--scrollbar-shadow-inner-vertical, inset 3px 3px 3px 0px rgba(0, 0, 0, 0.5));
}
.rux-dialog__content::-webkit-scrollbar-track:horizontal {
  box-shadow: var(--scrollbar-shadow-inner-vertical, inset 3px 3px 3px 0px rgba(0, 0, 0, 0.5));
}
.rux-dialog__footer {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  padding: var(--spacing-4, 1rem);
  color: var(--color-text-primary, #ffffff);
}
.rux-dialog__message {
  padding: var(--spacing-4, 1rem) var(--spacing-4, 1rem) var(--spacing-1, 0.25rem) var(--spacing-4, 1rem);
  font-size: var(--font-body-1-font-size, 1rem);
  line-height: var(--font-body-1-line-height, calc(24 / 16));
  text-align: left;
}
.rux-dialog .rux-button {
  box-shadow: none !important;
}
.rux-dialog__header.hidden {
  display: none;
}
.rux-dialog__message.hidden {
  display: none;
}

rux-icon {
  margin-right: var(--spacing-3, 0.75rem);
}

@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@-moz-keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@-webkit-keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@-o-keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@-ms-keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}