/**
 * SAW LMS Design System - Components
 * 
 * Reusable UI components
 */

/* ================================
   BUTTONS
   ================================ */
.saw-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--saw-space-2);
    padding: var(--saw-space-3) var(--saw-space-5);
    font-size: var(--saw-text-sm);
    font-weight: var(--saw-font-medium);
    line-height: 1;
    text-decoration: none;
    border: 1px solid transparent;
    border-radius: var(--saw-radius);
    cursor: pointer;
    transition: all var(--saw-duration-fast) var(--saw-ease-default);
    white-space: nowrap;
}

.saw-btn:focus-visible {
    outline: 2px solid var(--saw-primary);
    outline-offset: 2px;
}

.saw-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Primary */
.saw-btn--primary {
    background: var(--saw-primary);
    color: var(--saw-white);
    border-color: var(--saw-primary);
}

.saw-btn--primary:hover:not(:disabled) {
    background: var(--saw-primary-hover);
    border-color: var(--saw-primary-hover);
}

.saw-btn--primary:active {
    background: var(--saw-primary-active);
}

/* Secondary */
.saw-btn--secondary {
    background: var(--saw-secondary);
    color: var(--saw-white);
    border-color: var(--saw-secondary);
}

.saw-btn--secondary:hover:not(:disabled) {
    background: var(--saw-secondary-hover);
}

/* Outline */
.saw-btn--outline {
    background: transparent;
    color: var(--saw-primary);
    border-color: var(--saw-primary);
}

.saw-btn--outline:hover:not(:disabled) {
    background: var(--saw-primary-subtle);
}

/* Ghost */
.saw-btn--ghost {
    background: transparent;
    color: var(--saw-text-secondary);
    border-color: transparent;
}

.saw-btn--ghost:hover:not(:disabled) {
    background: var(--saw-bg-alt);
    color: var(--saw-text);
}

/* Danger */
.saw-btn--danger {
    background: var(--saw-error);
    color: var(--saw-white);
    border-color: var(--saw-error);
}

.saw-btn--danger:hover:not(:disabled) {
    background: #dc2626;
}

/* Sizes */
.saw-btn--sm {
    padding: var(--saw-space-2) var(--saw-space-3);
    font-size: var(--saw-text-xs);
}

.saw-btn--lg {
    padding: var(--saw-space-4) var(--saw-space-6);
    font-size: var(--saw-text-base);
}

/* Icon button */
.saw-btn--icon {
    padding: var(--saw-space-2);
    width: 36px;
    height: 36px;
}

.saw-btn--icon.saw-btn--sm {
    width: 28px;
    height: 28px;
}

.saw-btn--icon.saw-btn--lg {
    width: 44px;
    height: 44px;
}

/* Full width */
.saw-btn--block {
    width: 100%;
}

/* ================================
   CARDS
   ================================ */
.saw-card {
    background: var(--saw-surface);
    border: 1px solid var(--saw-border);
    border-radius: var(--saw-radius-lg);
    overflow: hidden;
}

.saw-card--elevated {
    box-shadow: var(--saw-shadow-md);
    border-color: transparent;
}

.saw-card--interactive {
    cursor: pointer;
    transition: all var(--saw-duration-fast) var(--saw-ease-default);
}

.saw-card--interactive:hover {
    box-shadow: var(--saw-shadow-lg);
    transform: translateY(-2px);
}

.saw-card__image {
    width: 100%;
    aspect-ratio: 16/9;
    object-fit: cover;
}

.saw-card__body {
    padding: var(--saw-space-4);
}

.saw-card__title {
    font-size: var(--saw-text-lg);
    font-weight: var(--saw-font-semibold);
    margin-bottom: var(--saw-space-2);
}

.saw-card__text {
    color: var(--saw-text-secondary);
    font-size: var(--saw-text-sm);
}

.saw-card__footer {
    padding: var(--saw-space-4);
    border-top: 1px solid var(--saw-border);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* ================================
   FORMS
   ================================ */
.saw-form-group {
    margin-bottom: var(--saw-space-4);
}

.saw-label {
    display: block;
    font-size: var(--saw-text-sm);
    font-weight: var(--saw-font-medium);
    color: var(--saw-text);
    margin-bottom: var(--saw-space-2);
}

.saw-input,
.saw-select,
.saw-textarea {
    width: 100%;
    padding: var(--saw-space-3) var(--saw-space-4);
    font-size: var(--saw-text-base);
    color: var(--saw-text);
    background: var(--saw-surface);
    border: 1px solid var(--saw-border);
    border-radius: var(--saw-radius);
    transition: all var(--saw-duration-fast) var(--saw-ease-default);
}

.saw-input:focus,
.saw-select:focus,
.saw-textarea:focus {
    border-color: var(--saw-primary);
    box-shadow: 0 0 0 3px rgba(var(--saw-primary-rgb), 0.15);
    outline: none;
}

.saw-input::placeholder,
.saw-textarea::placeholder {
    color: var(--saw-text-tertiary);
}

.saw-input--error {
    border-color: var(--saw-error);
}

.saw-input--error:focus {
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.15);
}

.saw-textarea {
    min-height: 100px;
    resize: vertical;
}

.saw-select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%236b7280' d='M2.5 4L6 7.5 9.5 4'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right var(--saw-space-3) center;
    padding-right: var(--saw-space-10);
}

/* Checkbox & Radio */
.saw-checkbox,
.saw-radio {
    display: flex;
    align-items: center;
    gap: var(--saw-space-2);
    cursor: pointer;
}

.saw-checkbox input,
.saw-radio input {
    width: 18px;
    height: 18px;
    accent-color: var(--saw-primary);
}

/* Helper text */
.saw-form-hint {
    font-size: var(--saw-text-sm);
    color: var(--saw-text-tertiary);
    margin-top: var(--saw-space-1);
}

.saw-form-error {
    font-size: var(--saw-text-sm);
    color: var(--saw-error);
    margin-top: var(--saw-space-1);
}

/* ================================
   BADGES
   ================================ */
.saw-badge {
    display: inline-flex;
    align-items: center;
    padding: var(--saw-space-1) var(--saw-space-2);
    font-size: var(--saw-text-xs);
    font-weight: var(--saw-font-medium);
    border-radius: var(--saw-radius-full);
    white-space: nowrap;
}

.saw-badge--primary {
    background: var(--saw-primary-subtle);
    color: var(--saw-primary);
}

.saw-badge--success {
    background: var(--saw-success-subtle);
    color: var(--saw-success);
}

.saw-badge--warning {
    background: var(--saw-warning-subtle);
    color: var(--saw-warning);
}

.saw-badge--error {
    background: var(--saw-error-subtle);
    color: var(--saw-error);
}

.saw-badge--neutral {
    background: var(--saw-bg-alt);
    color: var(--saw-text-secondary);
}

/* ================================
   AVATARS
   ================================ */
.saw-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: var(--saw-radius-full);
    background: var(--saw-primary-subtle);
    color: var(--saw-primary);
    font-weight: var(--saw-font-semibold);
    overflow: hidden;
}

.saw-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.saw-avatar--sm {
    width: 32px;
    height: 32px;
    font-size: var(--saw-text-sm);
}

.saw-avatar--lg {
    width: 56px;
    height: 56px;
    font-size: var(--saw-text-xl);
}

.saw-avatar--xl {
    width: 80px;
    height: 80px;
    font-size: var(--saw-text-3xl);
}

/* ================================
   PROGRESS
   ================================ */
.saw-progress {
    width: 100%;
    height: 8px;
    background: var(--saw-bg-alt);
    border-radius: var(--saw-radius-full);
    overflow: hidden;
}

.saw-progress__bar {
    height: 100%;
    background: var(--saw-primary);
    border-radius: var(--saw-radius-full);
    transition: width var(--saw-duration-slow) var(--saw-ease-out);
}

.saw-progress--success .saw-progress__bar {
    background: var(--saw-success);
}

/* ================================
   ALERTS
   ================================ */
.saw-alert {
    padding: var(--saw-space-4);
    border-radius: var(--saw-radius);
    display: flex;
    gap: var(--saw-space-3);
}

.saw-alert__icon {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
}

.saw-alert__content {
    flex: 1;
}

.saw-alert__title {
    font-weight: var(--saw-font-semibold);
    margin-bottom: var(--saw-space-1);
}

.saw-alert--info {
    background: var(--saw-info-subtle);
    color: var(--saw-info);
}

.saw-alert--success {
    background: var(--saw-success-subtle);
    color: var(--saw-success);
}

.saw-alert--warning {
    background: var(--saw-warning-subtle);
    color: var(--saw-warning);
}

.saw-alert--error {
    background: var(--saw-error-subtle);
    color: var(--saw-error);
}

/* ================================
   ICONS (SVG)
   ================================ */
.saw-icon {
    display: inline-block;
    width: 1em;
    height: 1em;
    vertical-align: -0.125em;
    fill: currentColor;
}

.saw-icon--sm {
    font-size: 16px;
}

.saw-icon--md {
    font-size: 20px;
}

.saw-icon--lg {
    font-size: 24px;
}

.saw-icon--xl {
    font-size: 32px;
}

/* ================================
   SKELETON LOADING
   ================================ */
.saw-skeleton {
    background: linear-gradient(90deg,
            var(--saw-bg-alt) 25%,
            var(--saw-gray-200) 50%,
            var(--saw-bg-alt) 75%);
    background-size: 200% 100%;
    animation: saw-skeleton-pulse 1.5s ease-in-out infinite;
    border-radius: var(--saw-radius);
}

@keyframes saw-skeleton-pulse {
    0% {
        background-position: 200% 0;
    }

    100% {
        background-position: -200% 0;
    }
}

.saw-skeleton--text {
    height: 1em;
    margin-bottom: var(--saw-space-2);
}

.saw-skeleton--avatar {
    width: 40px;
    height: 40px;
    border-radius: var(--saw-radius-full);
}

.saw-skeleton--image {
    width: 100%;
    aspect-ratio: 16/9;
}