:host {
  display: block;
}

.rux-time-region {
  background: var(--color-background-base-default);
  padding: 0.25rem;
  overflow: hidden;
  color: var(--color-text-primary);
  border-radius: 3px;
  border-style: solid;
  border-width: 1px;
  border-color: var(--color-background-interactive-default);
}

.rux-time-region__content {
  display: flex;
  align-items: center;
  font-family: var(--font-body-2-font-family);
  font-size: var(--font-body-2-font-size);
  font-weight: var(--font-body-2-font-weight);
  letter-spacing: var(--font-body-2-letter-spacing);
}
.rux-time-region__content ::slotted(rux-status),
.rux-time-region__content rux-status {
  margin-right: 0.125rem;
}

.rux-time-region__datetime {
  margin-top: 0.25rem;
  text-align: right;
  font-family: var(--font-body-3-font-family);
  font-size: var(--font-body-3-font-size);
  font-weight: var(--font-body-3-font-weight);
  letter-spacing: var(--font-body-3-letter-spacing);
}

.rux-time-region--selected {
  background: var(--color-background-interactive-default);
  border: 1px solid var(--color-background-interactive-default);
  --status-symbols: var(--status-symbols-light);
  color: var(--color-text-inverse);
}

.rux-time-region--normal:not(.rux-time-region--selected) {
  border-color: var(--status-symbol-color-fill-normal);
}

.rux-time-region--critical:not(.rux-time-region--selected) {
  border-color: var(--status-symbol-color-fill-critical);
}

.rux-time-region--caution:not(.rux-time-region--selected) {
  border-color: var(--status-symbol-color-fill-caution);
}

.rux-time-region--standby:not(.rux-time-region--selected) {
  border-color: var(--status-symbol-color-fill-standby);
}

.hidden {
  visibility: hidden;
}

.rux-time-region--partial-start {
  border-left-style: dashed;
  border-left-width: 2px;
}

.rux-time-region--partial-start.rux-time-region--selected {
  border-right-color: var(--color-palette-neutral-1000);
}

.rux-time-region--partial-end.rux-time-region--selected {
  border-left-color: var(--color-palette-neutral-1000);
}

.rux-time-region--partial-end {
  border-right-width: 2px;
  border-right-style: dashed;
}