/* ==========================================================================
   HIZIRBEY DESIGN SYSTEM - ACTION GROUP COMPONENT

   Proje:
   HIZIRBEY Portal

   Paket:
   HIZIRBEY Design System

   Bileşen:
   ActionGroup

   Dosya:
   themes/default/assets/css/hds/components/action-group/base.css

   Açıklama:
   Button, Form ve diğer HDS işlem bileşenlerini ortak hizalama,
   aralık ve wrapping davranışlarıyla merkezi olarak yönetir.

   Bu dosya herhangi bir uygulama modülüne bağlı değildir.
   Users, Permissions, Roles, Languages, Phrases ve diğer bütün
   modüller tarafından ortak kullanılabilir.

   Yazar:
   Mehmet Kalli

   Oluşturulma:
   02.08.2026 01:30

   Güncellendi:
   12.08.2026

   Sürüm:
   2.1.0

   Ownership:
   Public HDS ActionGroup layout and semantic width-policy contract

   Contract:
   Roles: default, actionbar
   Width policies: content, equal, fixed
   Default width policy: content
   Fixed width token: --hds-action-group-button-width
========================================================================== */

/* =========================================================================
 * >>> Action Group Container
 * ========================================================================= */

.hds-action-group {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;

  width: max-content;
  min-width: 0;
  max-width: 100%;

  flex-wrap: nowrap;

  margin: 0;
  padding: 0;

  white-space: nowrap;
}

/* <<< Action Group Container */

/* =========================================================================
 * >>> Content Width Policy
 * ========================================================================= */

.hds-action-group__item {
  display: inline-flex;
  align-items: center;

  flex: 0 0 auto;

  min-width: 0;

  margin: 0;
  padding: 0;
}

.hds-action-group__item > .hds-form,
.hds-action-group__item > form {
  display: inline-flex;
  align-items: center;

  flex: 0 0 auto;

  width: auto;
  min-width: 0;

  margin: 0;
  padding: 0;
}

.hds-action-group__item .hds-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  flex: 0 0 auto;

  width: auto;
  min-width: 0;

  margin: 0;

  text-align: center;
}

/* <<< Content Width Policy */

/* =========================================================================
 * >>> Equal Width Policy
 * ========================================================================= */

.hds-action-group--width-equal {
  display: inline-grid;
  grid-auto-columns: 1fr;
  grid-auto-flow: column;
  align-items: stretch;
}

.hds-action-group--width-equal .hds-action-group__item,
.hds-action-group--width-equal .hds-action-group__item > .hds-form,
.hds-action-group--width-equal .hds-action-group__item > form,
.hds-action-group--width-equal .hds-action-group__item .hds-button {
  width: 100%;
}

/* <<< Equal Width Policy */

/* =========================================================================
 * >>> Fixed Width Policy
 * ========================================================================= */

.hds-action-group--width-fixed .hds-action-group__item,
.hds-action-group--width-fixed .hds-action-group__item > .hds-form,
.hds-action-group--width-fixed .hds-action-group__item > form,
.hds-action-group--width-fixed .hds-action-group__item .hds-button {
  width: var(--hds-action-group-button-width);
  min-width: var(--hds-action-group-button-width);
}

/* <<< Fixed Width Policy */

/* =========================================================================
 * >>> Wrapping
 * ========================================================================= */

.hds-action-group.is-wrapping {
  width: auto;
  min-width: 0;

  flex-wrap: wrap;

  white-space: normal;
}

/* Equal-width groups retain their equal track contract. */
.hds-action-group--width-equal.is-wrapping {
  width: 100%;
}

/* <<< Wrapping */

/* =========================================================================
 * >>> Responsive Safety
 * ========================================================================= */

@media (max-width: 575.98px) {
  .hds-action-group {
    max-width: 100%;
  }
}

/* <<< Responsive Safety */

/* =========================================================================
 * >>> Action Group Alignment
 * ========================================================================= */

.hds-action-group--align-start {
  justify-content: flex-start;
}

.hds-action-group--align-center {
  justify-content: center;
}

.hds-action-group--align-end {
  justify-content: flex-end;
}

.hds-action-group--align-between {
  justify-content: space-between;

  width: 100%;
}

/* <<< Action Group Alignment */

/* =========================================================================
 * >>> Action Group Gap
 * ========================================================================= */

.hds-action-group--gap-sm {
  gap: 0.4rem;
}

.hds-action-group--gap-md {
  gap: 0.75rem;
}

.hds-action-group--gap-lg {
  gap: 1rem;
}

/* <<< Action Group Gap */

/* =========================================================================
 * >>> Action Bar Role
 * ========================================================================= */

.hds-action-group--role-actionbar {
  display: flex;

  width: 100%;
  min-width: 0;

  justify-content: flex-end;

  margin-top: 1.5rem;
  padding-top: 1rem;

  border-top: 1px solid var(--hds-studio-border);
}

.hds-action-group--role-actionbar .hds-button {
  width: auto;
  min-width: 7rem;
  min-height: 2.85rem;

  padding: 0.75rem 1.35rem;
}

.hds-action-group--role-actionbar.hds-action-group--width-equal .hds-button {
  width: 100%;
}

.hds-action-group--role-actionbar.hds-action-group--width-fixed .hds-button {
  width: var(--hds-action-group-button-width);
  min-width: var(--hds-action-group-button-width);
}

/* <<< Action Bar Role */