:host {
  /**
  * @prop --clockTextColor: the color of the clock text
  */
  /**
  * @prop --clockBackgroundColor: the background color for the clock
  */
  /**
  * @prop --clockBorderColor: the border color for the clock
  */
  /**
  * @prop --clockLabelColor: the label color for the clock
  */
  display: flex;
  margin: 0 1rem;
  color: var(--clockTextColor);
  font-size: 1.15rem;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

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

.rux-clock__segment__value {
  display: flex;
  align-items: center;
  font-family: var(--fontFamilyMono);
  font-weight: 700;
  border: 1px solid var(--clockBorderColor);
  background-color: var(--clockBackgroundColor);
  margin-bottom: 0.25rem;
  white-space: nowrap;
  overflow-y: hidden;
  text-overflow: ellipsis;
}

.rux-clock__segment__value {
  font-size: 1.75rem;
  height: 2.75rem;
  padding: 0 0.75rem;
}

:host([small]) .rux-clock__segment__value {
  height: 2.75rem;
  padding: 0 0.75rem;
  font-size: 1.15rem;
  font-weight: 500;
}

.rux-clock__segment__label {
  font-size: 0.875rem;
  color: var(--clockLabelColor);
}

.rux-clock__day-of-the-year .rux-clock__segment__value {
  border-right: none;
}

.rux-clock__segment--secondary .rux-clock__segment__value {
  font-weight: 400;
}

.rux-clock__aos {
  margin-left: 1em;
}

.rux-clock__los {
  margin-left: 0.5em;
}