:host {
  display: flex;
  align-items: center;
  justify-content: center;
}

:host button {
  border-radius: 8px;
  padding-left: 12px;
  padding-right: 12px;
  padding-top: 6px;
  padding-bottom: 6px;
  margin-left: 2px;
  margin-right: 2px;
  margin-top: 0px;
  margin-bottom: 0px;
  position: relative;
  transition: 150ms color ease-in-out;
  border: none;
  background: var(--ion-color-step-300, #edeef0);
  color: var(--ion-text-color, #000);
  font-family: inherit;
  font-size: inherit;
  cursor: pointer;
  appearance: none;
  overflow: hidden;
}
@supports (margin-inline-start: 0) or (-webkit-margin-start: 0) {
  :host button {
    padding-left: unset;
    padding-right: unset;
    -webkit-padding-start: 12px;
    padding-inline-start: 12px;
    -webkit-padding-end: 12px;
    padding-inline-end: 12px;
  }
}
@supports (margin-inline-start: 0) or (-webkit-margin-start: 0) {
  :host button {
    margin-left: unset;
    margin-right: unset;
    -webkit-margin-start: 2px;
    margin-inline-start: 2px;
    -webkit-margin-end: 2px;
    margin-inline-end: 2px;
  }
}

:host(.time-active) #time-button,
:host(.date-active) #date-button {
  color: var(--ion-color-base);
}

:host(.datetime-button-disabled) {
  pointer-events: none;
}

:host(.datetime-button-disabled) button {
  opacity: 0.4;
}