/*
 * PURPOSE: Menentukan gaya visual untuk action.
 * LAYER: Style.
 * DEPENDS ON: Struktur HTML dan kelas komponen yang memakai stylesheet ini.
 * USED BY: Dokumen aplikasi dan komponen yang menggunakan kelas gaya ini.
 * BOUNDARY: Hanya presentasi visual; tidak menentukan kontrak data atau perilaku aplikasi.
*/
.aksi-kartu {
  display: flex;
  flex: none;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 2px;
  max-width: 100%;
}

.aksi-kartu__tirai {
  position: fixed;
  z-index: 20;
  inset: 0;
}

.aksi-kartu--buka {
  position: relative;
  z-index: 21;
  padding: 2px;
  border: 1px solid var(--garis);
  border-radius: 999px;
  background: var(--kertas);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.14);
}

.aksi-kartu__ikon {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 999px;
  background: none;
  color: var(--tinta-redup);
  cursor: pointer;
}

.aksi-kartu__ikon:hover {
  background: var(--latar);
  color: var(--tinta);
}

.aksi-kartu__ikon:disabled {
  opacity: 0.4;
  cursor: default;
  pointer-events: none;
}

.aksi-kartu__ikon--bahaya {
  color: var(--chip-merah);
}