@use '../../../../../shared-ui/src/styles/semantic/index' as tokens;

.demo-container {
  padding: tokens.$semantic-spacing-layout-md;
  max-width: 1200px;
  margin: 0 auto;
}

.demo-section {
  margin-bottom: tokens.$semantic-spacing-layout-lg;
  padding: tokens.$semantic-spacing-component-md;
  background: tokens.$semantic-color-surface-primary;
  border: tokens.$semantic-border-width-1 solid tokens.$semantic-color-border-primary;
  border-radius: tokens.$semantic-border-radius-md;
  box-shadow: tokens.$semantic-shadow-elevation-1;

  h3 {
    margin: 0 0 tokens.$semantic-spacing-content-paragraph 0;
    font-size: tokens.$semantic-typography-heading-h3-size;
    color: tokens.$semantic-color-text-primary;
  }
}

.demo-row {
  display: flex;
  gap: tokens.$semantic-spacing-component-sm;
  flex-wrap: wrap;
  margin-bottom: tokens.$semantic-spacing-content-paragraph;
}

.demo-controls {
  display: flex;
  align-items: center;
  gap: tokens.$semantic-spacing-component-md;
  margin-bottom: tokens.$semantic-spacing-content-paragraph;
  flex-wrap: wrap;

  label {
    font-size: tokens.$semantic-typography-font-size-md;
    color: tokens.$semantic-color-text-primary;
    font-weight: tokens.$semantic-typography-font-weight-medium;
    min-width: 100px;
  }

  input[type="range"] {
    flex: 1;
    min-width: 200px;
    max-width: 300px;
    margin: 0 tokens.$semantic-spacing-component-sm;
  }
}

.demo-button {
  padding: tokens.$semantic-spacing-component-sm tokens.$semantic-spacing-component-md;
  background: tokens.$semantic-color-primary;
  color: tokens.$semantic-color-on-primary;
  border: none;
  border-radius: tokens.$semantic-border-radius-sm;
  font-size: tokens.$semantic-typography-font-size-md;
  cursor: pointer;
  transition: all tokens.$semantic-motion-duration-fast tokens.$semantic-motion-easing-ease;

  &:hover {
    background: tokens.$semantic-color-primary-hover;
    box-shadow: tokens.$semantic-shadow-elevation-2;
  }

  &:active {
    transform: translateY(1px);
    box-shadow: tokens.$semantic-shadow-elevation-1;
  }

  &--secondary {
    background: tokens.$semantic-color-surface-secondary;
    color: tokens.$semantic-color-text-primary;
    border: tokens.$semantic-border-width-1 solid tokens.$semantic-color-border-primary;

    &:hover {
      background: tokens.$semantic-color-surface-secondary;
    }
  }
}

// Backdrop content styles
.backdrop-content {
  background: tokens.$semantic-color-surface-primary;
  padding: tokens.$semantic-spacing-component-lg;
  border-radius: tokens.$semantic-border-radius-md;
  box-shadow: tokens.$semantic-shadow-elevation-4;
  text-align: center;
  max-width: 400px;
  margin: 0 auto;

  h4 {
    margin: 0 0 tokens.$semantic-spacing-content-paragraph 0;
    font-size: tokens.$semantic-typography-heading-h4-size;
    color: tokens.$semantic-color-text-primary;
  }

  p {
    margin: 0 0 tokens.$semantic-spacing-content-paragraph 0;
    font-size: tokens.$semantic-typography-font-size-md;
    color: tokens.$semantic-color-text-secondary;
  }

  &--glass {
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: tokens.$semantic-border-width-1 solid rgba(255, 255, 255, 0.2);
  }

  &--large {
    max-width: 600px;
    padding: tokens.$semantic-spacing-component-xl;
  }

  &--small {
    max-width: 300px;
    padding: tokens.$semantic-spacing-component-md;
  }
}

// Event log styles
.demo-log {
  background: tokens.$semantic-color-surface-secondary;
  border: tokens.$semantic-border-width-1 solid tokens.$semantic-color-border-subtle;
  border-radius: tokens.$semantic-border-radius-sm;
  padding: tokens.$semantic-spacing-component-md;
  max-height: 200px;
  overflow-y: auto;
  margin-bottom: tokens.$semantic-spacing-content-paragraph;
  font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
}

.log-entry {
  font-size: tokens.$semantic-typography-font-size-sm;
  color: tokens.$semantic-color-text-primary;
  padding: tokens.$semantic-spacing-component-xs 0;
  border-bottom: tokens.$semantic-border-width-1 solid tokens.$semantic-color-border-subtle;

  &:last-child {
    border-bottom: none;
  }

  &--empty {
    color: tokens.$semantic-color-text-tertiary;
    font-style: italic;
    text-align: center;
    border-bottom: none;
  }
}

// Dark mode support
:host-context(.dark-theme) {
  .backdrop-content {
    &--glass {
      background: rgba(0, 0, 0, 0.8);
      border: tokens.$semantic-border-width-1 solid rgba(255, 255, 255, 0.1);
    }
  }
}

// Responsive design
@media (max-width: #{tokens.$semantic-breakpoint-md - 1px}) {
  .demo-container {
    padding: tokens.$semantic-spacing-layout-sm;
  }

  .demo-section {
    padding: tokens.$semantic-spacing-component-sm;
  }

  .backdrop-content {
    margin: tokens.$semantic-spacing-layout-sm;
    padding: tokens.$semantic-spacing-component-md;

    &--large,
    &--small {
      max-width: none;
      padding: tokens.$semantic-spacing-component-md;
    }
  }

  .demo-controls {
    flex-direction: column;
    align-items: stretch;

    input[type="range"] {
      min-width: auto;
    }
  }
}

@media (max-width: #{tokens.$semantic-breakpoint-sm - 1px}) {
  .demo-row {
    flex-direction: column;
  }

  .demo-button {
    width: 100%;
    text-align: center;
  }
}