/* Typography Usage mixins */
@supports selector(input::-webkit-datetime-edit) {
  .tds-datetime-input:not(:focus)::-webkit-datetime-edit,
  .tds-datetime-input-md:not(:focus)::-webkit-datetime-edit,
  .tds-datetime-input-sm:not(:focus)::-webkit-datetime-edit {
    color: var(--tds-datetime-placeholder-color);
  }
}
.tds-datetime-input[type=datetime-local] ~ .icon-time,
.tds-datetime-input-md[type=datetime-local] ~ .icon-time,
.tds-datetime-input-sm[type=datetime-local] ~ .icon-time {
  display: none;
}
.tds-datetime-input[type=date] ~ .icon-time,
.tds-datetime-input-md[type=date] ~ .icon-time,
.tds-datetime-input-sm[type=date] ~ .icon-time {
  display: none;
}
.tds-datetime-input[type=month] ~ .icon-time,
.tds-datetime-input-md[type=month] ~ .icon-time,
.tds-datetime-input-sm[type=month] ~ .icon-time {
  display: none;
}
.tds-datetime-input[type=week] ~ .icon-time,
.tds-datetime-input-md[type=week] ~ .icon-time,
.tds-datetime-input-sm[type=week] ~ .icon-time {
  display: none;
}
.tds-datetime-input[type=time] ~ .icon-datetime-local,
.tds-datetime-input-md[type=time] ~ .icon-datetime-local,
.tds-datetime-input-sm[type=time] ~ .icon-datetime-local {
  display: none;
}

.tds-datetime-input {
  box-sizing: border-box;
}
.tds-datetime-input * {
  box-sizing: border-box;
}
.tds-datetime-input {
  font-family: var(--type-system-body-01-font-family);
  font-size: calc(var(--type-system-body-01-font-size) * 1px);
  line-height: calc(var(--type-system-body-01-line-height) * 1px);
  font-weight: var(--type-system-body-01-font-weight);
  letter-spacing: calc(var(--type-system-body-01-letter-spacing) * 1px);
  text-transform: var(--type-system-body-01-text-transform);
  width: 100%;
  box-sizing: border-box;
  margin: 0;
  height: 100%;
  outline: none;
  border: none;
  color: var(--tds-datetime-color);
  background-color: var(--tds-datetime-background);
  border-width: calc(var(--component--input-border-width-top) * 1px) calc(var(--component--input-border-width-right) * 1px) calc(var(--component--input-border-width-bottom) * 1px) calc(var(--component--input-border-width-left) * 1px);
  border-radius: calc(var(--component--input-border-radius-top-left) * 1px) calc(var(--component--input-border-radius-top-right) * 1px) calc(var(--component--input-border-radius-bottom-right) * 1px) calc(var(--component--input-border-radius-bottom-left) * 1px);
  border-style: solid;
  border-color: var(--component--input-border-default);
}
.tds-datetime-input:disabled {
  cursor: not-allowed;
}
.tds-datetime-input {
  padding: var(--unit-20) var(--unit-16);
}
.tds-datetime-input:hover:not(:disabled) {
  border-width: calc(var(--component--input-border-width-top) * 1px) calc(var(--component--input-border-width-right) * 1px) calc(var(--component--input-border-width-bottom) * 1px) calc(var(--component--input-border-width-left) * 1px);
  border-radius: calc(var(--component--input-border-radius-top-left) * 1px) calc(var(--component--input-border-radius-top-right) * 1px) calc(var(--component--input-border-radius-bottom-right) * 1px) calc(var(--component--input-border-radius-bottom-left) * 1px);
  border-style: solid;
  border-color: var(--component--input-border-hover);
}
.tds-datetime-input.iphone {
  padding: 0;
}

.tds-datetime-input-md,
.tds-datetime-input-sm {
  padding: var(--unit-16);
}
.tds-datetime-input-md.iphone,
.tds-datetime-input-sm.iphone {
  padding: 0;
}

.tds-datetime-container {
  display: flex;
  position: relative;
  height: 56px;
  box-sizing: border-box;
  transition: border-color 200ms ease;
}
.tds-form-datetime-md .tds-datetime-container {
  height: 48px;
}
.tds-form-datetime-sm .tds-datetime-container {
  height: 40px;
}

.tds-datetime-input-container {
  position: relative;
  width: 100%;
}
.tds-datetime-input-container .datetime-icon {
  height: 20px;
  width: 20px;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: 18px;
  pointer-events: none;
  color: var(--tds-datetime-icon);
}

.tds-datetime-label {
  font-family: var(--type-system-label-01-font-family);
  font-size: calc(var(--type-system-label-01-font-size) * 1px);
  line-height: calc(var(--type-system-label-01-line-height) * 1px);
  font-weight: var(--type-system-label-01-font-weight);
  letter-spacing: calc(var(--type-system-label-01-letter-spacing) * 1px);
  display: block;
  margin-bottom: var(--unit-4);
  color: var(--tds-datetime-label-color);
}

.tds-datetime-label-inside {
  font-family: var(--type-system-label-02-font-family);
  font-size: calc(var(--type-system-label-02-font-size) * 1px);
  line-height: calc(var(--type-system-label-02-line-height) * 1px);
  font-weight: var(--type-system-label-02-font-weight);
  letter-spacing: calc(var(--type-system-label-02-letter-spacing) * 1px);
  position: absolute;
  pointer-events: none;
  color: var(--tds-datetime-label-color);
  left: 16px;
}

.tds-form-datetime {
  display: block;
  min-width: 208px;
  background: unset;
}
.tds-form-datetime-nomin {
  min-width: auto;
}
.tds-form-datetime-disabled {
  opacity: var(--tds-datetime-opacity-disabled);
}
.tds-form-datetime-disabled .tds-datetime-label {
  cursor: not-allowed;
}

.tds-form-datetime.tds-datetime-container-label-inside .tds-datetime-input {
  padding-top: var(--unit-24);
  padding-bottom: 15px;
}
.tds-form-datetime.tds-datetime-container-label-inside .tds-datetime-input.iphone {
  padding: 0;
}
.tds-form-datetime.tds-datetime-container-label-inside .tds-datetime-input-md,
.tds-form-datetime.tds-datetime-container-label-inside .tds-datetime-input-sm {
  padding-top: var(--unit-20);
  padding-bottom: 11px;
}
.tds-form-datetime.tds-datetime-container-label-inside .tds-datetime-input-md ~ .tds-datetime-label-inside,
.tds-form-datetime.tds-datetime-container-label-inside .tds-datetime-input-sm ~ .tds-datetime-label-inside {
  top: 16px;
}
.tds-form-datetime.tds-datetime-container-label-inside .tds-datetime-input-md.iphone,
.tds-form-datetime.tds-datetime-container-label-inside .tds-datetime-input-sm.iphone {
  padding: 0;
}
.tds-form-datetime.tds-datetime-container-label-inside .tds-datetime-input-sm ~ .tds-datetime-label-inside,
.tds-form-datetime.tds-datetime-container-label-inside .tds-datetime-input-md ~ .tds-datetime-label-inside {
  font-family: var(--type-system-label-02-font-family);
  font-size: calc(var(--type-system-label-02-font-size) * 1px);
  line-height: calc(var(--type-system-label-02-line-height) * 1px);
  font-weight: var(--type-system-label-02-font-weight);
  letter-spacing: calc(var(--type-system-label-02-letter-spacing) * 1px);
  transition: 0.1s ease all;
  top: 8px;
}
.tds-form-datetime.tds-datetime-container-label-inside .tds-datetime-input:not(.tds-datetime-input-sm, .tds-datetime-input-md) ~ .tds-datetime-label-inside {
  font-family: var(--type-system-label-02-font-family);
  font-size: calc(var(--type-system-label-02-font-size) * 1px);
  line-height: calc(var(--type-system-label-02-line-height) * 1px);
  font-weight: var(--type-system-label-02-font-weight);
  letter-spacing: calc(var(--type-system-label-02-letter-spacing) * 1px);
  transition: 0.1s ease all;
  top: 12px;
}

.tds-datetime-focus .tds-datetime-input,
.tds-datetime-focus .tds-datetime-input-md,
.tds-datetime-focus .tds-datetime-input-sm {
  outline: 2px solid var(--component--focus-ring-color-strong);
  box-shadow: 0 0 0 1px var(--component--focus-ring-color-discrete);
  outline-offset: 1px;
  z-index: 1;
}

.tds-datetime-helper {
  font-family: var(--type-system-label-01-font-family);
  font-size: calc(var(--type-system-label-01-font-size) * 1px);
  line-height: calc(var(--type-system-label-01-line-height) * 1px);
  font-weight: var(--type-system-label-01-font-weight);
  letter-spacing: calc(var(--type-system-label-01-letter-spacing) * 1px);
  display: block;
  flex-basis: 100%;
  padding: var(--unit-4) 0;
  color: var(--tds-datetime-helper);
}
.tds-datetime-helper .tds-helper {
  display: inline-flex;
  gap: 8px;
}

.tds-form-datetime-success .tds-datetime-input::-webkit-datetime-edit {
  color: var(--tds-datetime-color);
}
.tds-form-datetime-success .tds-datetime-input {
  border-width: calc(var(--component--input-border-width-top) * 1px) calc(var(--component--input-border-width-right) * 1px) calc(var(--component--input-border-width-bottom) * 1px) calc(var(--component--input-border-width-left) * 1px);
  border-radius: calc(var(--component--input-border-radius-top-left) * 1px) calc(var(--component--input-border-radius-top-right) * 1px) calc(var(--component--input-border-radius-bottom-right) * 1px) calc(var(--component--input-border-radius-bottom-left) * 1px);
  border-style: solid;
  border-color: var(--component--input-border-success-default);
}

.tds-form-datetime-error .tds-datetime-input::-webkit-datetime-edit {
  color: var(--tds-datetime-color);
}
.tds-form-datetime-error .tds-datetime-helper {
  color: var(--tds-datetime-helper-error);
}
.tds-form-datetime-error .tds-datetime-helper .tds-helper {
  display: flex;
  gap: var(--unit-8);
  flex-wrap: nowrap;
}
.tds-form-datetime-error .tds-datetime-input {
  border-width: calc(var(--component--input-border-width-top) * 1px) calc(var(--component--input-border-width-right) * 1px) calc(var(--component--input-border-width-bottom) * 1px) calc(var(--component--input-border-width-left) * 1px);
  border-radius: calc(var(--component--input-border-radius-top-left) * 1px) calc(var(--component--input-border-radius-top-right) * 1px) calc(var(--component--input-border-radius-bottom-right) * 1px) calc(var(--component--input-border-radius-bottom-left) * 1px);
  border-style: solid;
  border-color: var(--component--input-text-error-default);
}

/* Datetime picker icon remove testing */
input[type=datetime-local]::-webkit-inner-spin-button,
input[type=datetime-local]::-webkit-calendar-picker-indicator {
  opacity: 0;
}

input[type=date]::-webkit-inner-spin-button,
input[type=date]::-webkit-calendar-picker-indicator {
  opacity: 0;
}

input[type=month]::-webkit-inner-spin-button,
input[type=month]::-webkit-calendar-picker-indicator {
  opacity: 0;
}

input[type=week]::-webkit-inner-spin-button,
input[type=week]::-webkit-calendar-picker-indicator {
  opacity: 0;
}

input[type=time]::-webkit-inner-spin-button,
input[type=time]::-webkit-calendar-picker-indicator {
  opacity: 0;
}

@supports (-moz-appearance: none) {
  .type-datetime-local .icon-datetime-local,
  .type-date .icon-datetime-local {
    display: none;
  }
}