:host {
  /**
   * @prop --color-classification-text-light: [DEPRECATED] the color of light text in the classification marking
   */
  /**
   * @prop --color-classification-text-dark: [DEPRECATED] the color of dark text in the classification marking
   */
  display: block;
}

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

.rux-classification {
  font-family: var(--font-body-1-bold-font-family);
  font-size: var(--font-body-1-bold-font-size);
  font-weight: var(--font-body-1-bold-font-weight);
  letter-spacing: var(--font-body-1-bold-letter-spacing);
  color: var(--color-text-white);
  background-color: var(--classification-banner-color-background-unclassified);
  text-transform: uppercase;
}

.rux-classification--banner {
  z-index: 1000;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 26px;
  transition: top 10.5s ease;
  overflow-wrap: anywhere;
  color: var(--color-text-white);
  background-color: var(--classification-banner-color-background-unclassified);
  position: sticky;
  top: 0;
  left: 0;
  flex-wrap: nowrap;
  flex-grow: 1;
  width: 100%;
}
.rux-classification--banner__footer {
  bottom: 0;
  top: inherit;
  position: sticky;
}

.rux-classification--tag {
  width: fit-content;
  padding: 0.1875rem 0.625rem;
  border-radius: var(--radius-base);
  font-family: var(--font-body-2-bold-font-family);
  font-size: var(--font-body-2-bold-font-size);
  font-weight: var(--font-body-2-bold-font-weight);
  letter-spacing: var(--font-body-2-bold-letter-spacing);
}

:host([classification=top-secret-sci]) .rux-classification {
  background-color: var(--classification-banner-color-background-topsecretsci);
  color: var(--color-text-black);
}

:host([classification=top-secret]) .rux-classification {
  background-color: var(--classification-banner-color-background-topsecret);
  color: var(--color-text-black);
}

:host([classification=secret]) .rux-classification {
  background-color: var(--classification-banner-color-background-secret);
}

:host([classification=confidential]) .rux-classification {
  background-color: var(--classification-banner-color-background-confidential);
}

:host([classification=cui]) .rux-classification,
:host([classification=controlled]) .rux-classification {
  background-color: var(--classification-banner-color-background-cui);
}

:host([classification=unclassified]) .rux-classification {
  background-color: var(--classification-banner-color-background-unclassified);
}