Sdk_TV_app/static/css/buttons.css

/* ============================================================================
   TV_APP - Button Styles
   All button variants used across templates
   ============================================================================ */

/* ============================================================================
   Base Button Styles
   ============================================================================ */

.btn,
.action-btn,
.control-btn,
.zoom-btn,
button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-sm);
  cursor: pointer;
  border: 2px solid transparent;
  border-radius: var(--radius-lg);
  padding: 8px 12px;
  font-size: 0.9rem;
  font-weight: 500;
  transition: all var(--transition-normal);
  text-decoration: none;
  white-space: nowrap;
  user-select: none;
  vertical-align: middle;
}

button:not([class]) {
  background: #f8f9fa;
  border-color: #e9ecef;
  color: var(--text);
  box-shadow: var(--shadow-sm);
}

button:not([class]):hover {
  background: #e9ecef;
  border-color: var(--primary);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
  transform: translateY(-1px);
  color: var(--primary);
}

/* ============================================================================
   Action Buttons
   ============================================================================ */

.action-btn,
.control-btn,
.zoom-btn {
  background: #f8f9fa;
  border: 2px solid #e9ecef;
  color: var(--text);
  box-shadow: var(--shadow-sm);
}

.action-btn:hover,
.control-btn:hover,
.zoom-btn:hover {
  background: #e9ecef;
  border-color: var(--primary);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
  transform: translateY(-1px);
  color: var(--primary);
}

.action-btn:active,
.control-btn:active,
.zoom-btn:active {
  transform: translateY(0);
  box-shadow: var(--shadow-sm);
}

.action-btn:disabled,
.control-btn:disabled,
.zoom-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none !important;
}

/* ============================================================================
   Button Sizes
   ============================================================================ */

.btn-sm {
  padding: 8px 12px;
  font-size: 0.85rem;
}

.btn-lg {
  padding: 14px 24px;
  font-size: 1.05rem;
}

.btn-xl {
  padding: 16px 32px;
  font-size: 1.1rem;
}

/* ============================================================================
   Button Variants - Colors
   ============================================================================ */

/* Primary Button */
.btn-primary,
.action-btn.primary {
  background: var(--primary);
  border-color: var(--primary);
  color: white;
  box-shadow: var(--shadow-md);
}

.btn-primary:hover,
.action-btn.primary:hover {
  background: #0056b3;
  border-color: #0056b3;
  box-shadow: 0 4px 12px rgba(0, 123, 255, 0.3);
}

.btn-primary:active,
.action-btn.primary:active {
  background: #004085;
  box-shadow: var(--shadow-sm);
}

/* Secondary Button */
.btn-secondary,
.action-btn.secondary {
  background: var(--secondary);
  border-color: var(--secondary);
  color: white;
  box-shadow: var(--shadow-md);
}

.btn-secondary:hover,
.action-btn.secondary:hover {
  background: #545b62;
  border-color: #545b62;
  box-shadow: 0 4px 12px rgba(108, 117, 125, 0.3);
}

/* Success Button */
.btn-success,
.action-btn.success {
  background: var(--success);
  border-color: var(--success);
  color: white;
  box-shadow: var(--shadow-md);
}

.btn-success:hover,
.action-btn.success:hover {
  background: #218838;
  border-color: #218838;
  box-shadow: 0 4px 12px rgba(40, 167, 69, 0.3);
}

/* Danger Button */
.btn-danger,
.action-btn.danger {
  background: var(--danger);
  border-color: var(--danger);
  color: white;
  box-shadow: var(--shadow-md);
}

.btn-danger:hover,
.action-btn.danger:hover {
  background: #c82333;
  border-color: #c82333;
  box-shadow: 0 4px 12px rgba(220, 53, 69, 0.3);
}

/* Warning Button */
.btn-warning,
.action-btn.warning {
  background: var(--warning);
  border-color: var(--warning);
  color: #333;
  box-shadow: var(--shadow-md);
}

.btn-warning:hover,
.action-btn.warning:hover {
  background: #e0a800;
  border-color: #e0a800;
  box-shadow: 0 4px 12px rgba(255, 193, 7, 0.3);
}

/* Info Button */
.btn-info,
.action-btn.info {
  background: var(--info);
  border-color: var(--info);
  color: white;
  box-shadow: var(--shadow-md);
}

.btn-info:hover,
.action-btn.info:hover {
  background: #138496;
  border-color: #138496;
  box-shadow: 0 4px 12px rgba(23, 162, 184, 0.3);
}

/* ============================================================================
   Button States
   ============================================================================ */

.btn:disabled,
.btn-primary:disabled,
.btn-secondary:disabled,
.btn-success:disabled,
.btn-danger:disabled,
button:disabled {
  opacity: 0.65;
  cursor: not-allowed;
  transform: none !important;
  box-shadow: var(--shadow-sm);
}

/* ============================================================================
   Button Groups
   ============================================================================ */

.btn-group {
  display: flex;
  gap: var(--spacing-sm);
  flex-wrap: wrap;
}

.btn-group.vertical {
  flex-direction: column;
}

/* ============================================================================
   Special Button Styles
   ============================================================================ */

/* Icon Buttons */
.btn-icon {
  width: 44px;
  height: 44px;
  padding: 0;
  border-radius: var(--radius-md);
  font-size: 1.25rem;
}

.btn-icon:hover {
  background: var(--primary);
  color: white;
  border-color: var(--primary);
}

/* Toggle Button */
.btn-toggle {
  background: #f8f9fa;
  border: 2px solid #e9ecef;
  color: var(--text);
}

.btn-toggle.active {
  background: var(--primary);
  border-color: var(--primary);
  color: white;
}

/* Loading State */
.btn.loading {
  pointer-events: none;
  opacity: 0.7;
  position: relative;
}

.btn.loading::after {
  content: '';
  position: absolute;
  width: 16px;
  height: 16px;
  top: 50%;
  left: 50%;
  margin-left: -8px;
  margin-top: -8px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  border-top-color: white;
  animation: spin 0.6s linear infinite;
}

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

/* ============================================================================
   Link Buttons
   ============================================================================ */

a.btn,
a.action-btn,
a.nav-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

a.btn:hover {
  text-decoration: none;
}

/* ============================================================================
   Responsive Button Styles
   ============================================================================ */

@media (max-width: 768px) {
  .btn,
  .action-btn,
  .control-btn {
    padding: 10px 15px;
    font-size: 0.9rem;
  }

  .btn-icon {
    width: 40px;
    height: 40px;
  }

  .btn-group {
    gap: var(--spacing-xs);
  }
}

@media (max-width: 480px) {
  .btn,
  .action-btn,
  .control-btn {
    padding: 8px 12px;
    font-size: 0.85rem;
  }

  .btn-group {
    width: 100%;
  }

  .btn-group > .btn {
    flex: 1;
  }
}

@media (max-height: 500px) and (orientation: landscape) {
  .btn,
  .action-btn {
    padding: 6px 12px;
    font-size: 0.8rem;
  }

  .btn-icon {
    width: 36px;
    height: 36px;
  }
}