/* ==========================================================================
   HIZIRBEY DESIGN SYSTEM - BUTTON COMPONENT

   Proje:
   HIZIRBEY Portal

   Paket:
   HIZIRBEY Design System

   Bileşen:
   Button

   Dosya:
   themes/default/assets/css/hds/components/button/base.css

   Açıklama:
   HDS Button bileşeninin temel yapısını, varyantlarını, boyutlarını,
   şekillerini ve durumlarını merkezi olarak yönetir.

   Mimari:
   - Genel Button davranışları yalnızca bu dosyada bulunur.
   - Modüle özel Button görünümleri button/modules altında tutulur.
   - Yeni geliştirmelerde yalnızca HDS Button API kullanılmalıdır.

   Yazar:
   Mehmet Kalli

   Oluşturulma:
   02.08.2026 15:50

   Güncellendi:
   12.08.2026

   Sürüm:
   2.1.0

   Ownership:
   Public HDS Button presentation and natural content-width contract

   Contract:
   Default width: natural content width
   Text overflow: visible unless a consumer explicitly constrains it
   Variants, sizes, shapes and states remain orthogonal to width
========================================================================== */

/* ==========================================================================
 * >>> Button Base

   Amaç:
   HDS Button bileşeninin ortak kutu modeli, hizalama, tipografi,
   etkileşim ve geçiş davranışlarını tanımlar.
========================================================================== */

.hds-button {
  box-sizing: border-box;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--button-gap, 6px);

  min-height: var(--button-height, 38px);
  padding: 9px var(--button-padding-x, 14px);

  border: 1px solid transparent;
  border-radius: var(--button-radius, 6px);

  font: inherit;
  font-size: var(--button-font-size, 14px);
  font-weight: var(--button-font-weight, 700);
  line-height: 1;

  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  vertical-align: middle;

  cursor: pointer;
  user-select: none;

  transition:
    background-color 0.2s ease,
    border-color 0.2s ease,
    color 0.2s ease,
    box-shadow 0.2s ease,
    opacity 0.2s ease,
    transform 0.2s ease;
}

.hds-button:hover {
  text-decoration: none;
}

.hds-button:active {
  transform: translateY(1px);
}

.hds-button:focus-visible {
  outline: 3px solid var(--button-focus-outline, rgba(15, 83, 107, 0.25));
  outline-offset: 2px;
}

/* <<< Button Base */

/* ==========================================================================
 * >>> Button Disabled State

   Amaç:
   Devre dışı veya erişilemez butonların görsel ve etkileşim
   davranışlarını ortak biçimde yönetir.
========================================================================== */

.hds-button.disabled,
.hds-button:disabled,
.hds-button[aria-disabled="true"] {
  opacity: var(--button-disabled-opacity, 0.55);

  cursor: not-allowed;
  pointer-events: none;

  transform: none;
}

/* <<< Button Disabled State */

/* ==========================================================================
 * >>> Button Content

   Amaç:
   HDS Button renderer tarafından üretilen ikon ve metin alanlarının
   ortak hizalama ve taşma davranışlarını tanımlar.
========================================================================== */

.hds-button__icon,
.hds-button__text {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.hds-button__icon {
  flex: 0 0 auto;

  line-height: 1;
}

.hds-button__text {
  min-width: 0;
  white-space: nowrap;
}

/* <<< Button Content */

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

   Amaç:
   Eski AdminCP ve yeni HDS butonlarının küçük, orta ve büyük
   ölçülerini ortak standartlarla tanımlar.
========================================================================== */

.hds-button.sm {
  min-height: 32px;
  padding: 7px 11px;

  font-size: 12px;
}

.hds-button.md {
  min-height: var(--button-height, 38px);
  padding: 9px var(--button-padding-x, 14px);

  font-size: var(--button-font-size, 14px);
}

.hds-button.lg {
  min-height: 44px;
  padding: 11px 18px;

  font-size: 15px;
}

/* <<< Button Sizes */

/* ==========================================================================
 * >>> Button Shapes

   Amaç:
   HDS Button bileşeninin kare, yuvarlatılmış ve kapsül
   biçimlerini merkezi olarak tanımlar.
========================================================================== */

.hds-button.square {
  border-radius: 0;
}

.hds-button.rounded {
  border-radius: var(--button-radius, 6px);
}

.hds-button.pill {
  border-radius: 999px;
}

/* <<< Button Shapes */

/* ==========================================================================
 * >>> Primary Button

   Amaç:
   Kaydetme, oluşturma ve sayfadaki ana işlemleri gösterir.
========================================================================== */

.hds-button.primary {
  border-color: var(--button-primary-border);
  background: var(--button-primary-background);
  color: var(--button-primary-color) !important;
}

.hds-button.primary:hover {
  border-color: var(--button-primary-hover-border);
  background: var(--button-primary-hover-background);
  color: var(--button-primary-color) !important;
}

/* <<< Primary Button */

/* ==========================================================================
 * >>> Secondary Button

   Amaç:
   Geri dönme, vazgeçme ve ikincil işlemleri gösterir.
========================================================================== */

.hds-button.secondary {
  border-color: var(--button-secondary-border);
  background: var(--button-secondary-background);
  color: var(--button-secondary-color) !important;
}

.hds-button.secondary:hover {
  border-color: var(--button-secondary-hover-border);
  background: var(--button-secondary-hover-background);
  color: var(--button-secondary-color) !important;
}

/* <<< Secondary Button */

/* ==========================================================================
 * >>> Success Button

   Amaç:
   Dışa aktarma, uygulama, onaylama ve başarılı işlemleri gösterir.
========================================================================== */

.hds-button.success {
  border-color: var(--button-success-border);
  background: var(--button-success-background);
  color: var(--button-success-color) !important;
}

.hds-button.success:hover {
  border-color: var(--button-success-hover-border);
  background: var(--button-success-hover-background);
  color: var(--button-success-color) !important;
}

/* <<< Success Button */

/* ==========================================================================
 * >>> Danger Button

   Amaç:
   Silme ve geri alınamayacak işlemleri gösterir.
========================================================================== */

.hds-button.danger {
  border-color: var(--button-danger-border);
  background: var(--button-danger-background);
  color: var(--button-danger-color) !important;
}

.hds-button.danger:hover {
  border-color: var(--button-danger-hover-border);
  background: var(--button-danger-hover-background);
  color: var(--button-danger-color) !important;
}

/* <<< Danger Button */

/* ==========================================================================
 * >>> Warning Button

   Amaç:
   Dikkat gerektiren veya kullanıcıdan kontrollü onay isteyen
   işlemleri gösterir.
========================================================================== */

.hds-button.warning {
  border-color: var(--button-warning-border);
  background: var(--button-warning-background);
  color: var(--button-warning-color) !important;
}

.hds-button.warning:hover {
  border-color: var(--button-warning-hover-border);
  background: var(--button-warning-hover-background);
  color: var(--button-warning-color) !important;
}

/* <<< Warning Button */

/* ==========================================================================
 * >>> Info Button

   Amaç:
   Bilgilendirici ve yardımcı işlemleri gösterir.
========================================================================== */

.hds-button.info {
  border-color: var(--button-info-border);
  background: var(--button-info-background);
  color: var(--button-info-color) !important;
}

.hds-button.info:hover {
  border-color: var(--button-info-hover-border);
  background: var(--button-info-hover-background);
  color: var(--button-info-color) !important;
}

/* <<< Info Button */

/* ==========================================================================
 * >>> Light Button

   Amaç:
   Düşük görsel önceliğe sahip yardımcı ve filtreleme
   işlemlerini gösterir.
========================================================================== */

.hds-button.light {
  border-color: var(--button-light-border);
  background: var(--button-light-background);
  color: var(--button-light-color) !important;
}

.hds-button.light:hover {
  border-color: var(--button-light-hover-border);
  background: var(--button-light-hover-background);
  color: var(--button-light-color) !important;
}

/* <<< Light Button */

/* ==========================================================================
 * >>> Dark Button

   Amaç:
   Yüksek kontrast gerektiren koyu görünümlü işlemleri gösterir.
========================================================================== */

.hds-button.dark {
  border-color: var(--button-dark-border);
  background: var(--button-dark-background);
  color: var(--button-dark-color) !important;
}

.hds-button.dark:hover {
  border-color: var(--button-dark-hover-border);
  background: var(--button-dark-hover-background);
  color: var(--button-dark-color) !important;
}

/* <<< Dark Button */

/* ==========================================================================
 * >>> Edit Button

   Amaç:
   Kayıt düzenleme işlemlerini ortak açık mavi görünümle gösterir.
========================================================================== */

.hds-button.edit {
  border-color: var(--button-edit-border);
  background: var(--button-edit-background);
  color: var(--button-edit-color) !important;
}

.hds-button.edit:hover {
  border-color: var(--button-edit-hover-border);
  background: var(--button-edit-hover-background);
  color: var(--button-edit-color) !important;
}

/* <<< Edit Button */

/* ==========================================================================
 * >>> Copy Button

   Amaç:
   Kayıt kopyalama ve çoğaltma işlemlerini ortak mor
   görünümle gösterir.
========================================================================== */

.hds-button.copy {
  border-color: var(--button-copy-border);
  background: var(--button-copy-background);
  color: var(--button-copy-color) !important;
}

.hds-button.copy:hover {
  border-color: var(--button-copy-hover-border);
  background: var(--button-copy-hover-background);
  color: var(--button-copy-hover-color) !important;
}

/* <<< Copy Button */

/* ==========================================================================
 * >>> Button Loading State

   Amaç:
   HDS Button bileşeninin işlem devam ederken yükleniyor
   durumunu görsel olarak belirtir.
========================================================================== */

.hds-button.loading {
  cursor: wait;
  pointer-events: none;
}

.hds-button.loading .hds-button__icon {
  animation: hds-button-loading-spin 0.8s linear infinite;
}

@keyframes hds-button-loading-spin {
  to {
    transform: rotate(360deg);
  }
}

/* <<< Button Loading State */