:host {
  display: flex;
  margin: var(--spacing-0, 0rem);
  color: var(--color-palette-neutral-000, #ffffff);
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

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

:host(:not([hide-labels])) {
  height: calc(var(--spacing-8, 2rem) * 2);
}

.rux-clock {
  display: flex;
  user-select: none;
  color: var(--clock-text-color);
}

.rux-clock__segment {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.rux-clock__segment__value {
  display: flex;
  align-items: center;
  color: var(--gsb-color-text, #ffffff);
  font-family: var(--font-monospace-1-font-family, 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif);
  font-variant-numeric: tabular-nums;
  font-weight: var(--font-monospace-1-font-weight, 500);
  font-size: var(--font-monospace-1-font-size, 1.75rem);
  letter-spacing: var(--font-monospace-1-letter-spacing, 0em);
  box-shadow: var(--gsb-color-background, #172635) 0 0 0 1px inset;
  background-color: var(--clock-datetime-color-background, #101923);
  white-space: nowrap;
  overflow-y: hidden;
  text-overflow: ellipsis;
  height: var(--spacing-10, 2.5rem);
  padding: var(--spacing-0, 0rem) var(--spacing-3, 0.75rem);
}

:host([small]) .rux-clock__segment__value {
  height: var(--spacing-10, 2.5rem);
  padding: var(--spacing-1, 0.25rem) var(--spacing-3, 0.75rem);
  font-size: 1.15rem;
  font-weight: var(--font-weight-medium, 500);
}

.rux-clock__segment__label {
  font-family: var(--font-body-2-font-family, 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif);
  font-size: var(--font-body-2-font-size, 0.875rem);
  font-weight: var(--font-body-2-font-weight, 400);
  letter-spacing: var(--font-body-2-letter-spacing, 0.005em);
  color: var(--color-palette-neutral-000, #ffffff);
  background: var(--gsb-color-background, #172635);
  padding: var(--spacing-0, 0rem) var(--spacing-3, 0.75rem) var(--spacing-0, 0rem) var(--spacing-3, 0.75rem);
  line-height: var(--font-body-3-line-height, calc(16 / 12));
  width: -moz-available;
  width: -webkit-fill-available;
  width: fill-available;
  height: var(--spacing-6, 1.5rem);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  text-align: center;
}

.rux-clock__aos {
  margin-left: var(--spacing-4, 1rem);
}