[hidden] {
  display: none !important;
}

:host {
  position: relative;
  box-sizing: border-box;
}
:host *, :host *:before, :host *:after {
  box-sizing: inherit;
}

/*
 * @prop --color: Color of timer control (Default: text)
 * @prop --background-color: Background color of timer control (Default: background)
 * @prop --control-color: Color of timer control buttons (Default: color-step 600)
 */
:host {
  position: initial;
  display: flex;
  flex-direction: column;
  width: 240px;
  line-height: 1;
  --color: var(--flow-color-text, #000000);
  --background-color: var(--flow-color-background, #ffffff);
  --control-color: var(--flow-color-step-600, #666666);
  color: var(--color);
  background: var(--background-color);
  box-sizing: border-box;
  padding: 0 4px;
}

:host([disabled]), :host([disabled]) flow-button {
  --color: var(--flow-color-step-200, #cccccc);
  --control-color: var(--flow-color-step-200, #cccccc);
  pointer-events: none;
}

.date-time-container, .vcr-button-container {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}

.spacer {
  flex: 1;
}

.date-container {
  min-width: 96px;
  flex: 0;
  display: flex;
  align-items: start;
}

.date-parts {
  display: flex;
  flex-direction: column;
}
.date-parts .day-part {
  margin-top: 5px;
  --font-size: 14px;
  --text-transform: uppercase;
  --font-weight: 700;
}
.date-parts .date-part {
  --font-size: 11px;
  margin-top: -4px;
}

.time-container {
  min-width: 120px;
  flex: 0;
  --font-size: 20px;
  display: flex;
  align-items: center;
}

flow-button {
  --color: currentColor;
}

flow-date-time-picker {
  --color: currentColor;
  --background-color: inherit;
}

flow-button {
  color: var(--control-color);
}