/*!
 * di-svg.css - A custom CSS file for handling SVG icons
 * 
 * This file provides a set of CSS classes to manage the size and appearance of SVG icons.
 * It includes default sizes, specific size classes, and custom styles for individual icons.
 * 
 * Author: Dimas
 * Version: 1.0.0
 * License: MIT
 */

:root {
  --di-icon-size: 2em;  /* Ukuran default untuk semua ikon */
  --di-icon-size-svg: 100%; /* Ukuran default SVG */
}

/* Kelas dasar untuk ikon */
.di {
  background-size: contain;
  background-repeat: no-repeat;
  display: inline-block;
  width: var(--di-icon-size);  /* Menggunakan variabel */
  height: var(--di-icon-size); /* Menggunakan variabel */
  max-width: 100%;
  max-height: 100%;
}

.di svg {
  width: var(--di-icon-size-svg); /* Menggunakan variabel */
  height: var(--di-icon-size-svg); /* Menggunakan variabel */
}

/* Pengaturan ukuran ikon */
.di-xs {
  font-size: 0.5em;  /* Ukuran ekstra kecil */
}

.di-sm {
  font-size: 0.8em;  /* Ukuran kecil */
}

.di-md {
  font-size: 1.5em;  /* Ukuran sedang */
}

.di-lg {
  font-size: 2em;  /* Ukuran besar */
}

.di-xl {
  font-size: 3em;  /* Ukuran sangat besar */
}

.di-xxl {
  font-size: 4em;  /* Ukuran ekstra besar */
}

.di-xxxl {
  font-size: 5em;  /* Ukuran ekstra sangat besar */
}

/* Gaya khusus untuk ikon tertentu */
.di-loader-circle-color-sync {
  background-image: url("di-loader-circle-color-sync.svg");
}

.di-loader-circle-color-sync-bold {
  background-image: url("di-loader-circle-color-sync-bold.svg");
  animation-duration: 6s;
}

.di-loader-circle-color-sync-bolder {
  background-image: url("di-loader-circle-color-sync-bolder.svg");
}

.di-loader-circle-color-sync-boldest {
  background-image: url("di-loader-circle-color-sync-boldest.svg");
}

.di-loader-circle-color {
  background-image: url("di-loader-circle-color.svg");
}

.di-loader-circle-color-bold {
  background-image: url("di-loader-circle-color-bold.svg");
}

.di-loader-circle-color-bolder {
  background-image: url("di-loader-circle-color-bolder.svg");
}

.di-loader-circle-color-boldest {
  background-image: url("di-loader-circle-color-boldest.svg");
}

.di-ai-color {
  background-image: url("di-ai-color.svg");
}