/* Time Picker Component */


/* Component-specific custom properties */
.c-time-picker {
  /* Base properties */
  --c-time-picker-font-family: var(--ds-font-family-sans);
  --c-time-picker-font-size: var(--ds-font-size-m);
  --c-time-picker-line-height: var(--ds-line-height-s);
  --c-time-picker-transition: all var(--ds-duration-fast) var(--ds-ease-out);
  
  /* Input properties */
  --c-time-picker-input-width: 10rem;
  --c-time-picker-input-background: var(--ds-color-surface);
  --c-time-picker-input-border-color: var(--ds-color-border);
  --c-time-picker-input-text-color: var(--ds-color-text);
  --c-time-picker-input-placeholder-color: var(--ds-color-text-weaker);
  --c-time-picker-input-border-radius: var(--ds-radius-s);
  --c-time-picker-input-padding: var(--ds-space-s) var(--ds-space-m);
  
  /* Focus state */
  --c-time-picker-input-border-color-focus: var(--ds-color-accent);
  --c-time-picker-input-box-shadow-focus: 0 0 0 2px var(--ds-color-accent-alpha);
  
  /* Error state */
  --c-time-picker-input-border-color-error: var(--ds-color-border-danger);
  --c-time-picker-input-box-shadow-error: 0 0 0 2px var(--ds-color-danger-alpha);
  
  /* Toggle button */
  --c-time-picker-toggle-width: 2.5rem;
  --c-time-picker-toggle-background: var(--ds-color-surface);
  --c-time-picker-toggle-border-color: var(--ds-color-border);
  --c-time-picker-toggle-color: var(--ds-color-text-weak);
  
  /* Dropdown */
  --c-time-picker-dropdown-background: var(--ds-color-surface);
  --c-time-picker-dropdown-border-color: var(--ds-color-border);
  --c-time-picker-dropdown-border-radius: var(--ds-radius-s);
  --c-time-picker-dropdown-box-shadow: var(--ds-shadow-m);
  --c-time-picker-dropdown-max-height: 12rem;
  --c-time-picker-dropdown-width: 8rem;
  
  /* Option */
  --c-time-picker-option-padding: var(--ds-space-s) var(--ds-space-m);
  --c-time-picker-option-background-hover: var(--ds-color-surface-lowered);
  --c-time-picker-option-background-selected: var(--ds-color-accent);
  --c-time-picker-option-color-selected: var(--ds-color-text-on-accent);
}

/* Base component */
.c-time-picker {
  display: flex;
  flex-direction: column;
  gap: var(--ds-space-xs);
  font-family: var(--c-time-picker-font-family);
  font-size: var(--c-time-picker-font-size);
  line-height: var(--c-time-picker-line-height);
  max-inline-size: 100%;
}

/* Label */
.c-time-picker__label {
  display: block;
  font-size: var(--ds-font-size-m);
  font-weight: var(--ds-font-weight-medium);
  color: var(--ds-color-text);
  line-height: var(--ds-line-height-s);
  margin-block-end: var(--ds-space-xs);
}

.c-time-picker__label--required::after {
  content: " *";
  color: var(--ds-color-text-danger);
}

.c-time-picker__label--optional::after {
  content: " (optional)";
  color: var(--ds-color-text-weaker);
  font-weight: var(--ds-font-weight-normal);
}

/* Container */
.c-time-picker__container {
  position: relative;
  display: flex;
  align-items: stretch;
  width: var(--c-time-picker-input-width);
  max-width: 100%;
}

/* Input */
.c-time-picker__input {
  flex: 1;
  min-width: 0;
  padding: var(--c-time-picker-input-padding);
  background: var(--c-time-picker-input-background);
  border: 1px solid var(--c-time-picker-input-border-color);
  border-radius: var(--c-time-picker-input-border-radius);
  border-end-end-radius: 0;
  border-start-end-radius: 0;
  border-inline-end: none;
  color: var(--c-time-picker-input-text-color);
  font-family: var(--c-time-picker-font-family);
  font-size: var(--c-time-picker-font-size);
  line-height: var(--c-time-picker-line-height);
  transition: var(--c-time-picker-transition);
  outline: none;
}

.c-time-picker__input::placeholder {
  color: var(--c-time-picker-input-placeholder-color);
}

.c-time-picker__input:focus {
  border-color: var(--c-time-picker-input-border-color-focus);
  box-shadow: var(--c-time-picker-input-box-shadow-focus);
  z-index: 1;
}

.c-time-picker__input:disabled {
  background: var(--ds-color-surface-lowered);
  color: var(--ds-color-text-weakest);
  cursor: not-allowed;
}

/* Toggle button */
.c-time-picker__toggle {
  flex-shrink: 0;
  width: var(--c-time-picker-toggle-width);
  padding: 0;
  background: var(--c-time-picker-toggle-background);
  border: 1px solid var(--c-time-picker-toggle-border-color);
  border-radius: var(--c-time-picker-input-border-radius);
  border-start-start-radius: 0;
  border-end-start-radius: 0;
  border-inline-start: none;
  color: var(--c-time-picker-toggle-color);
  cursor: pointer;
  transition: var(--c-time-picker-transition);
  display: flex;
  align-items: center;
  justify-content: center;
}

.c-time-picker__toggle:hover {
  background: var(--ds-color-surface-lowered);
  color: var(--ds-color-text);
}

.c-time-picker__toggle:focus {
  outline: 2px solid var(--ds-color-accent);
  outline-offset: 2px;
  z-index: 1;
}

.c-time-picker__toggle:disabled {
  background: var(--ds-color-surface-lowered);
  color: var(--ds-color-text-weakest);
  cursor: not-allowed;
}

.c-time-picker__toggle[aria-expanded="true"] {
  background: var(--ds-color-surface-lowered);
  color: var(--ds-color-text);
}

/* Dropdown */
.c-time-picker__dropdown {
  position: relative;
}

.c-time-picker__menu {
  position: absolute;
  top: 100%;
  right: 0;
  z-index: var(--ds-z-index-dropdown);
  width: var(--c-time-picker-dropdown-width);
  max-height: var(--c-time-picker-dropdown-max-height);
  margin-block-start: var(--ds-space-xs);
  padding: var(--ds-space-xs) 0;
  background: var(--c-time-picker-dropdown-background);
  border: 1px solid var(--c-time-picker-dropdown-border-color);
  border-radius: var(--c-time-picker-dropdown-border-radius);
  box-shadow: var(--c-time-picker-dropdown-box-shadow);
  overflow-y: auto;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-0.5rem);
  transition: var(--c-time-picker-transition);
}

.c-time-picker__dropdown--open .c-time-picker__menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* Option */
.c-time-picker__option {
  display: block;
  width: 100%;
  padding: var(--c-time-picker-option-padding);
  background: transparent;
  border: none;
  color: var(--ds-color-text);
  font-family: var(--c-time-picker-font-family);
  font-size: var(--c-time-picker-font-size);
  text-align: left;
  cursor: pointer;
  transition: var(--c-time-picker-transition);
  white-space: nowrap;
}

.c-time-picker__option:hover {
  background: var(--c-time-picker-option-background-hover);
}

.c-time-picker__option:focus {
  outline: 2px solid var(--ds-color-accent);
  outline-offset: -2px;
  background: var(--c-time-picker-option-background-hover);
}

.c-time-picker__option--selected {
  background: var(--c-time-picker-option-background-selected);
  color: var(--c-time-picker-option-color-selected);
}

.c-time-picker__option--selected:hover,
.c-time-picker__option--selected:focus {
  background: var(--c-time-picker-option-background-selected);
  color: var(--c-time-picker-option-color-selected);
}

/* Help text */
.c-time-picker__help {
  font-size: var(--ds-font-size-s);
  color: var(--ds-color-text-weak);
  line-height: var(--ds-line-height-s);
}

/* Error message */
.c-time-picker__error {
  font-size: var(--ds-font-size-s);
  color: var(--ds-color-text-danger);
  line-height: var(--ds-line-height-s);
}

/* Error state */
.c-time-picker--error .c-time-picker__input {
  border-color: var(--c-time-picker-input-border-color-error);
}

.c-time-picker--error .c-time-picker__input:focus {
  box-shadow: var(--c-time-picker-input-box-shadow-error);
}

.c-time-picker--error .c-time-picker__toggle {
  border-color: var(--c-time-picker-input-border-color-error);
}

/* Disabled state */
.c-time-picker--disabled {
  opacity: 0.6;
}

.c-time-picker--disabled .c-time-picker__input,
.c-time-picker--disabled .c-time-picker__toggle {
  pointer-events: none;
}

/* Size variants */
.c-time-picker--size-s {
  --c-time-picker-font-size: var(--ds-font-size-s);
  --c-time-picker-input-padding: calc(var(--ds-space-s) * 0.75) var(--ds-space-s);
  --c-time-picker-toggle-width: 2rem;
  --c-time-picker-input-width: 8rem;
}

.c-time-picker--size-l {
  --c-time-picker-font-size: var(--ds-font-size-l);
  --c-time-picker-input-padding: var(--ds-space-m) var(--ds-space-l);
  --c-time-picker-toggle-width: 3rem;
  --c-time-picker-input-width: 12rem;
}

/* Full width variant */
.c-time-picker--full-width {
  width: 100%;
}

.c-time-picker--full-width .c-time-picker__container {
  width: 100%;
}

/* Icon */
.c-time-picker__icon {
  width: 1rem;
  height: 1rem;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  flex-shrink: 0;
}

/* Loading state */
.c-time-picker--loading .c-time-picker__toggle {
  pointer-events: none;
}

.c-time-picker__spinner {
  width: 1rem;
  height: 1rem;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/* Responsive behavior */
@media (max-width: 768px) {
  .c-time-picker {
    --c-time-picker-input-width: 100%;
  }
  
  .c-time-picker__menu {
    left: 0;
    right: 0;
    width: auto;
  }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
  .c-time-picker__input,
  .c-time-picker__toggle {
    border-width: 2px;
  }
  
  .c-time-picker__option:focus {
    outline-width: 3px;
  }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
  .c-time-picker__input,
  .c-time-picker__toggle,
  .c-time-picker__menu,
  .c-time-picker__option {
    transition: none;
  }
  
  .c-time-picker__spinner {
    animation: none;
  }
}

/* Print styles */
@media print {
  .c-time-picker__toggle,
  .c-time-picker__menu {
    display: none;
  }
  
  .c-time-picker__input {
    border-inline-end: 1px solid var(--c-time-picker-input-border-color);
    border-radius: var(--c-time-picker-input-border-radius);
  }
}