@use 'ui-design-system/src/styles/semantic/index' as *;
/**
 * ==========================================================================
 * THEME SWITCHER COMPONENT STYLES
 * ==========================================================================
 * Material Design 3 inspired styling for the theme switcher component.
 * Uses CSS variables for runtime theming support.
 * ==========================================================================
 */


// Tokens available globally via main application styles


.theme-switcher {
  background-color: $semantic-color-surface-primary;
  border-radius: $semantic-border-radius-lg;
  padding: $semantic-spacing-component-lg;
  box-shadow: $semantic-shadow-elevated;
  border: 1px solid $semantic-color-border-primary;
  position: relative;
  max-width: 400px;
  width: 100%;

  // ==========================================================================
  // HEADER STYLES
  // ==========================================================================

  &__header {
    margin-bottom: $semantic-spacing-component-lg;
  }

  &__title {
    @extend .skyui-heading--h3 !optional;
    color: $semantic-color-text-primary;
    margin: 0 0 $semantic-spacing-component-2xs 0;
  }

  &__subtitle {
    @extend .skyui-text--small !optional;
    color: $semantic-color-text-secondary;
    margin: 0;
  }

  // ==========================================================================
  // SECTION STYLES
  // ==========================================================================

  &__section {
    margin-bottom: $semantic-spacing-component-lg;

    &:last-child {
      margin-bottom: 0;
    }
  }

  &__section-title {
    @extend .skyui-heading--h4 !optional;
    color: $semantic-color-text-primary;
    margin: 0 0 $semantic-spacing-component-sm 0;
  }

  &__section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: $semantic-spacing-component-sm;
  }

  // ==========================================================================
  // DARK MODE TOGGLE STYLES
  // ==========================================================================

  &__option {
    display: flex;
    align-items: center;
  }

  &__label {
    display: flex;
    align-items: center;
    cursor: pointer;
    @extend .skyui-text--medium !optional;
    color: $semantic-color-text-primary;

    &:hover {
      color: $css-color-primary;
    }
  }

  &__checkbox {
    position: absolute;
    opacity: 0;
    cursor: pointer;

    &:checked + &-custom {
      background-color: $css-color-primary;
      border-color: $css-color-primary;

      &::after {
        display: block;
      }
    }

    &:focus + &-custom {
      outline: 2px solid $css-color-primary;
      outline-offset: 2px;
    }

    &:disabled + &-custom {
      opacity: 0.6;
      cursor: not-allowed;
    }
  }

  &__checkbox-custom {
    width: 20px;
    height: 20px;
    border: 2px solid $css-color-outline;
    border-radius: $semantic-border-radius-sm;
    margin-right: $semantic-spacing-component-sm;
    position: relative;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;

    &::after {
      content: '✓';
      color: $css-color-on-primary;
      font-size: 12px;
      font-weight: bold;
      display: none;
    }
  }

  &__text {
    user-select: none;
  }

  // ==========================================================================
  // THEME GRID STYLES
  // ==========================================================================

  .theme-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
    gap: $semantic-spacing-component-sm;
  }

  .theme-card {
    background-color: $semantic-color-primary-container;
    border: 2px solid $semantic-color-border-primary;
    border-radius: $semantic-border-radius-md;
    padding: $semantic-spacing-component-sm;
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
    text-align: center;

    &:hover:not(&--disabled) {
      border-color: $css-color-primary;
      box-shadow: $semantic-shadow-elevated;
      transform: translateY(-1px);
    }

    &--active {
      border-color: $css-color-primary;
      background-color: $css-color-primary-container;
    }

    &--disabled {
      opacity: 0.6;
      cursor: not-allowed;
    }

    &__preview {
      margin-bottom: $semantic-spacing-component-xs;
    }

    &__color-primary {
      width: 100%;
      height: 32px;
      border-radius: $semantic-border-radius-sm;
      margin-bottom: $semantic-spacing-component-2xs;
    }

    &__color-details {
      display: flex;
      gap: $semantic-spacing-component-2xs;
    }

    &__color-secondary,
    &__color-tertiary {
      flex: 1;
      height: 16px;
      border-radius: $semantic-border-radius-xs;
    }

    &__name {
      @extend .skyui-text--small !optional;
      color: $semantic-color-text-primary;
      font-weight: $semantic-typography-font-weight-medium;
      display: block;
    }

    &__active-indicator {
      position: absolute;
      top: 4px;
      right: 4px;
      color: $css-color-primary;
      background-color: $semantic-color-surface-primary;
      border-radius: 50%;
      width: 20px;
      height: 20px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 12px;
    }
  }

  // ==========================================================================
  // TOGGLE BUTTON STYLES
  // ==========================================================================

  &__toggle-btn {
    @extend .skyui-interactive-text--button-small !optional;
    background-color: transparent;
    color: $css-color-primary;
    border: 1px solid $css-color-primary;
    border-radius: $semantic-border-radius-sm;
    padding: $semantic-spacing-component-xs $semantic-spacing-component-sm;
    cursor: pointer;
    transition: all 0.2s ease;

    &:hover {
      background-color: $css-color-primary-container;
      border-color: $css-color-primary;
    }

    &--active {
      background-color: $css-color-primary;
      color: $css-color-on-primary;

      &:hover {
        background-color: var(--color-primary-hover, $css-color-primary);
        filter: brightness(0.9);
      }
    }

    &:disabled {
      opacity: 0.6;
      cursor: not-allowed;
    }
  }

  // ==========================================================================
  // CUSTOM PANEL STYLES
  // ==========================================================================

  &__custom-panel {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;

    &--visible {
      max-height: 800px;
    }
  }

  // ==========================================================================
  // CUSTOM COLOR INPUT STYLES
  // ==========================================================================

  .custom-color-input {
    margin-bottom: $semantic-spacing-component-md;

    &__label {
      @extend .skyui-form-text--label !optional;
      display: block;
      margin-bottom: $semantic-spacing-component-2xs;
      color: $semantic-color-text-primary;
    }

    &__container {
      display: flex;
      gap: $semantic-spacing-component-xs;
      align-items: center;
    }

    &__picker {
      width: 48px;
      height: 48px;
      border: none;
      border-radius: $semantic-border-radius-sm;
      cursor: pointer;
      background: none;

      &:disabled {
        opacity: 0.6;
        cursor: not-allowed;
      }
    }

    &__text {
      @extend .skyui-form-text--input !optional;
      flex: 1;
      padding: $semantic-spacing-component-sm;
      border: 1px solid $css-color-outline;
      border-radius: $semantic-border-radius-sm;
      background-color: $semantic-color-surface-primary;
      color: $semantic-color-text-primary;
      font-family: $semantic-typography-font-family-mono;

      &:focus {
        border-color: $css-color-primary;
        outline: none;
        box-shadow: 0 0 0 2px rgba($css-color-primary, 0.2);
      }

      &:disabled {
        opacity: 0.6;
        cursor: not-allowed;
        background-color: $semantic-color-surface-variant;
      }
    }
  }

  // ==========================================================================
  // THEME NAME INPUT STYLES
  // ==========================================================================

  .custom-theme-name {
    margin-bottom: $semantic-spacing-component-md;

    &__label {
      @extend .skyui-form-text--label !optional;
      display: block;
      margin-bottom: $semantic-spacing-component-2xs;
      color: $semantic-color-text-primary;
    }

    &__input {
      @extend .skyui-form-text--input !optional;
      width: 100%;
      padding: $semantic-spacing-component-sm;
      border: 1px solid $css-color-outline;
      border-radius: $semantic-border-radius-sm;
      background-color: $semantic-color-surface-primary;
      color: $semantic-color-text-primary;

      &:focus {
        border-color: $css-color-primary;
        outline: none;
        box-shadow: 0 0 0 2px rgba($css-color-primary, 0.2);
      }

      &:disabled {
        opacity: 0.6;
        cursor: not-allowed;
        background-color: $semantic-color-surface-variant;
      }
    }
  }

  // ==========================================================================
  // COLOR VALIDATION STYLES
  // ==========================================================================

  .color-validation {
    margin-bottom: $semantic-spacing-component-md;
    padding: $semantic-spacing-component-sm;
    border-radius: $semantic-border-radius-sm;

    &--error {
      background-color: rgba($css-color-error, 0.1);
      border: 1px solid $css-color-error;
    }

    &--success {
      background-color: rgba($semantic-color-success, 0.1);
      border: 1px solid $semantic-color-success;
    }

    &__title {
      @extend .skyui-text--small !optional;
      font-weight: $semantic-typography-font-weight-medium;
      margin-bottom: $semantic-spacing-component-2xs;
    }

    &__list {
      margin: 0;
      padding-left: $semantic-spacing-component-md;
      
      li {
        @extend .skyui-text--small !optional;
        margin-bottom: $semantic-spacing-component-2xs;

        &:last-child {
          margin-bottom: 0;
        }
      }
    }

    &--error &__title,
    &--error &__list {
      color: $css-color-error;
    }

    &--success &__title,
    &--success &__list {
      color: $semantic-color-success;
    }
  }

  // ==========================================================================
  // COLOR PREVIEW STYLES
  // ==========================================================================

  .color-preview {
    margin-bottom: $semantic-spacing-component-md;

    &__title {
      @extend .skyui-text--small !optional;
      font-weight: $semantic-typography-font-weight-medium;
      color: $semantic-color-text-primary;
      margin-bottom: $semantic-spacing-component-xs;
    }

    &__palette {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
      gap: $semantic-spacing-component-2xs;
    }

    &__swatch {
      aspect-ratio: 1;
      border-radius: $semantic-border-radius-sm;
      display: flex;
      align-items: center;
      justify-content: center;
      text-align: center;
      border: 1px solid $semantic-color-border-primary;
    }

    &__swatch-label {
      font-size: 10px;
      font-weight: $semantic-typography-font-weight-medium;
      text-transform: capitalize;
      text-shadow: 0 0 2px rgba(0, 0, 0, 0.5);
    }
  }

  // ==========================================================================
  // ACTION BUTTON STYLES
  // ==========================================================================

  .custom-color-actions {
    margin-bottom: $semantic-spacing-component-md;

    &__apply {
      @extend .skyui-interactive-text--button-medium !optional;
      width: 100%;
      background-color: $css-color-primary;
      color: $css-color-on-primary;
      border: none;
      border-radius: $semantic-border-radius-md;
      padding: $semantic-spacing-component-md $semantic-spacing-component-lg;
      cursor: pointer;
      transition: all 0.2s ease;
      font-weight: $semantic-typography-font-weight-medium;

      &:hover:not(:disabled) {
        background-color: var(--color-primary-hover, $css-color-primary);
        filter: brightness(0.9);
        box-shadow: $semantic-shadow-elevated;
        transform: translateY(-1px);
      }

      &:disabled {
        opacity: 0.6;
        cursor: not-allowed;
        transform: none;
        box-shadow: none;
      }
    }
  }

  // ==========================================================================
  // RESET BUTTON STYLES
  // ==========================================================================

  &__reset-btn {
    @extend .skyui-interactive-text--button-medium !optional;
    width: 100%;
    background-color: transparent;
    color: $css-color-error;
    border: 1px solid $css-color-error;
    border-radius: $semantic-border-radius-md;
    padding: $semantic-spacing-component-sm $semantic-spacing-component-lg;
    cursor: pointer;
    transition: all 0.2s ease;

    &:hover:not(:disabled) {
      background-color: rgba($css-color-error, 0.1);
      box-shadow: $semantic-shadow-elevated;
    }

    &:disabled {
      opacity: 0.6;
      cursor: not-allowed;
    }
  }

  // ==========================================================================
  // LOADING OVERLAY STYLES
  // ==========================================================================

  &__loading-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba($css-color-scrim, 0.5);
    border-radius: $semantic-border-radius-lg;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 10;
  }

  &__loading-spinner {
    width: 32px;
    height: 32px;
    border: 3px solid $semantic-color-border-primary;
    border-top: 3px solid $css-color-primary;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin-bottom: $semantic-spacing-component-sm;
  }

  &__loading-text {
    @extend .skyui-text--small !optional;
    color: $semantic-color-text-primary;
    font-weight: $semantic-typography-font-weight-medium;
  }
}

// ==========================================================================
// ANIMATIONS
// ==========================================================================

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

// ==========================================================================
// RESPONSIVE DESIGN
// ==========================================================================

@media (max-width: $semantic-breakpoint-sm) {
  .theme-switcher {
    padding: $semantic-spacing-component-md;
    
    .theme-grid {
      grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
    }
    
    .color-preview {
      &__palette {
        grid-template-columns: repeat(auto-fit, minmax(60px, 1fr));
      }
    }
  }
}