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

   Proje:
   HIZIRBEY Portal

   Paket:
   HIZIRBEY Design System

   Bileşen:
   Alert

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

   Açıklama:
   HDS Alert bileşeninin temel görünümünü, varyantlarını, ikonunu ve kapatma davranışını yönetir.

   Yazar:
   Mehmet Kalli

   Güncellendi:
   12.08.2026

   Sürüm:
   2.0.0

   Ownership:
   Public HDS Alert component presentation ve dismiss state

   Contract:
   Root: .hds-alert
   Children: icon, body, title, message, close
   Behavior: [data-hds-alert-close], .is-closing
========================================================================== */

/* =========================================================================
 * >>> HDS Alert Base
 * ========================================================================= */

.hds-alert {
  position: relative;

  display: flex;
  width: 100%;
  min-width: 0;
  align-items: flex-start;
  gap: 14px;

  padding: 16px 18px;

  border: 1px solid transparent;
  border-radius: 10px;

  font-size: 14px;
  line-height: 1.55;
}

/* <<< HDS Alert Base */

/* =========================================================================
 * >>> HDS Alert Icon
 * ========================================================================= */

.hds-alert__icon {
  display: inline-flex;
  width: 28px;
  height: 28px;
  flex: 0 0 28px;
  align-items: center;
  justify-content: center;

  border-radius: 50%;

  font-size: 15px;
  font-weight: 800;
}

/* <<< HDS Alert Icon */

/* =========================================================================
 * >>> HDS Alert Body
 * ========================================================================= */

.hds-alert__body {
  min-width: 0;
  flex: 1;
}

.hds-alert__title {
  margin: 0;

  color: inherit;

  font-size: 15px;
  font-weight: 700;
  line-height: 1.4;
}

.hds-alert__message {
  margin-top: 3px;
}

/* <<< HDS Alert Body */

/* =========================================================================
 * >>> HDS Alert Close Button
 * ========================================================================= */

.hds-alert__close {
  display: inline-flex;
  width: 30px;
  height: 30px;
  flex: 0 0 30px;
  align-items: center;
  justify-content: center;

  margin: -4px -6px -4px 0;
  padding: 0;

  border: 0;
  border-radius: 6px;

  background: transparent;
  color: currentColor;

  font: inherit;
  font-size: 22px;
  line-height: 1;

  cursor: pointer;
  opacity: 0.65;
}

.hds-alert__close:hover {
  background: rgba(0, 0, 0, 0.06);
  opacity: 1;
}

.hds-alert__close:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

/* <<< HDS Alert Close Button */

/* =========================================================================
 * >>> HDS Alert Variants
 * ========================================================================= */

.hds-alert.primary {
  border-color: #76a9b7;
  background: #eef8fb;
  color: #0f4f5f;
}

.hds-alert.secondary {
  border-color: #cfd4dc;
  background: #f8f9fb;
  color: #344054;
}

.hds-alert.success {
  border-color: #75c9a6;
  background: #ecfdf3;
  color: #136c49;
}

.hds-alert.danger {
  border-color: #ed9a9a;
  background: #fef3f2;
  color: #a32727;
}

.hds-alert.warning {
  border-color: #f2c768;
  background: #fffaeb;
  color: #8a5900;
}

.hds-alert.info {
  border-color: #84b9de;
  background: #eff8ff;
  color: #175f92;
}

.hds-alert.light {
  border-color: #e4e7ec;
  background: #ffffff;
  color: #344054;
}

.hds-alert.dark {
  border-color: #1d2939;
  background: #1d2939;
  color: #ffffff;
}

.hds-alert.primary .hds-alert__icon {
  background: #d9eef3;
}

.hds-alert.secondary .hds-alert__icon {
  background: #eaecf0;
}

.hds-alert.success .hds-alert__icon {
  background: #d1fadf;
}

.hds-alert.danger .hds-alert__icon {
  background: #fee4e2;
}

.hds-alert.warning .hds-alert__icon {
  background: #fef0c7;
}

.hds-alert.info .hds-alert__icon {
  background: #d1e9ff;
}

.hds-alert.light .hds-alert__icon {
  background: #f2f4f7;
}

.hds-alert.dark .hds-alert__icon {
  background: rgba(255, 255, 255, 0.14);
}

/* <<< HDS Alert Variants */

/* =========================================================================
 * >>> HDS Alert Dismiss Animation
 * ========================================================================= */

.hds-alert.is-closing {
  pointer-events: none;
  animation: hds-alert-close 180ms ease forwards;
}

@keyframes hds-alert-close {
  to {
    height: 0;
    margin: 0;
    padding-top: 0;
    padding-bottom: 0;
    border-width: 0;
    opacity: 0;
    transform: translateY(-4px);
  }
}

/* <<< HDS Alert Dismiss Animation */