ui-essentials/projects/demo-ui-essentials/src/app/demos/form-field-demo/form-field-demo.component.scss

@use '../../../../../ui-design-system/src/styles/semantic/index' as *;

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

  h2 {
    font-size: $semantic-typography-heading-h2-size;
    color: $semantic-color-text-primary;
    margin-bottom: $semantic-spacing-content-heading;
    font-weight: $semantic-typography-font-weight-bold;
  }

  h3 {
    font-size: $semantic-typography-heading-h3-size;
    color: $semantic-color-text-primary;
    margin-bottom: $semantic-spacing-content-paragraph;
    font-weight: $semantic-typography-font-weight-semibold;
  }
}

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

.demo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: $semantic-spacing-layout-md;
  margin-bottom: $semantic-spacing-content-heading;
}

.demo-item {
  padding: $semantic-spacing-component-md;
  background: $semantic-color-surface-secondary;
  border: $semantic-border-width-1 solid $semantic-color-border-primary;
  border-radius: $semantic-border-radius-md;
  overflow: hidden;
  box-sizing: border-box;

  h4 {
    font-size: $semantic-typography-heading-h4-size;
    color: $semantic-color-text-primary;
    margin-bottom: $semantic-spacing-content-list-item;
    font-weight: $semantic-typography-font-weight-medium;
  }

  p {
    font-size: $semantic-typography-font-size-sm;
    color: $semantic-color-text-secondary;
    margin-bottom: $semantic-spacing-content-paragraph;
  }
}

.demo-actions {
  display: flex;
  gap: $semantic-spacing-content-paragraph;
  align-items: center;
  margin-bottom: $semantic-spacing-content-heading;
  padding: $semantic-spacing-component-md;
  background: $semantic-color-surface-variant;
  border-radius: $semantic-border-radius-md;
}

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

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

  &:focus-visible {
    outline: 2px solid $semantic-color-focus;
    outline-offset: 2px;
  }

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

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

.demo-info {
  font-size: $semantic-typography-font-size-sm;
  color: $semantic-color-text-tertiary;
  margin-top: $semantic-spacing-content-list-item;
}

.form-demo {
  display: grid;
  gap: $semantic-spacing-content-heading;
}

.demo-input {
  width: 100%;
  box-sizing: border-box;
  padding: $semantic-spacing-component-sm;
  border: $semantic-border-width-1 solid $semantic-color-border-primary;
  border-radius: $semantic-border-radius-md;
  font-size: $semantic-typography-font-size-md;
  color: $semantic-color-text-primary;
  background: $semantic-color-surface-primary;
  transition: all $semantic-motion-duration-fast $semantic-motion-easing-ease-in-out;

  &:focus {
    outline: none;
    border-color: $semantic-color-primary;
    box-shadow: 0 0 0 2px $semantic-color-primary-container;
  }

  &:disabled {
    background: $semantic-color-surface-disabled;
    color: $semantic-color-text-disabled;
    cursor: not-allowed;
  }

  &--error {
    border-color: $semantic-color-error;
    background: $semantic-color-error-container;
  }

  &--success {
    border-color: $semantic-color-success;
    background: $semantic-color-tertiary-container;
  }
}

.demo-textarea {
  @extend .demo-input;
  min-height: 100px;
  resize: vertical;
}

.demo-select {
  @extend .demo-input;
  cursor: pointer;
}

.demo-checkbox,
.demo-radio {
  display: flex;
  align-items: center;
  gap: $semantic-spacing-content-line-normal;
  cursor: pointer;

  input {
    margin: 0;
  }

  label {
    font-size: $semantic-typography-font-size-sm;
    color: $semantic-color-text-primary;
    cursor: pointer;
  }
}

.validation-demo {
  display: grid;
  gap: $semantic-spacing-content-paragraph;
  padding: $semantic-spacing-component-md;
  background: $semantic-color-surface-variant;
  border-radius: $semantic-border-radius-md;
}

.form-status {
  padding: $semantic-spacing-component-sm;
  background: $semantic-color-surface-primary;
  border: $semantic-border-width-1 solid $semantic-color-border-subtle;
  border-radius: $semantic-border-radius-sm;
  font-family: 'JetBrains Mono', 'Consolas', monospace;
  font-size: $semantic-typography-font-size-xs;
}

.code-demo {
  background: $semantic-color-surface-variant;
  border: $semantic-border-width-1 solid $semantic-color-border-subtle;
  border-radius: $semantic-border-radius-md;
  padding: $semantic-spacing-component-md;
  margin-top: $semantic-spacing-content-paragraph;
  
  pre {
    font-family: 'JetBrains Mono', 'Consolas', monospace;
    font-size: $semantic-typography-font-size-xs;
    color: $semantic-color-text-secondary;
    overflow-x: auto;
    margin: 0;
  }
}

.layout-demo {
  display: grid;
  gap: $semantic-spacing-content-heading;
}

// Ensure form fields are properly contained
ui-form-field {
  display: block;
  width: 100%;
  box-sizing: border-box;
}

// Responsive adjustments
@media (max-width: $semantic-breakpoint-md - 1) {
  .demo-grid {
    grid-template-columns: 1fr;
    gap: $semantic-spacing-layout-sm;
  }
}