/* =========================================================
   KI-Labels für Bilder, Cards und sonstige Elemente
   ========================================================= */

:root {
  --ki-label-offset: 10px;
  --ki-label-z-index: 10;

  /* AI */
  --ki-icon-ai-white: url("../icons/label_ai_white.svg");
  --ki-icon-ai-black: url("../icons/label_ai_black.svg");
  --ki-icon-ai-white-transparent: url("../icons/label_ai_white-transparent.svg");
  --ki-icon-ai-black-transparent: url("../icons/label_ai_black-transparent.svg");

  /* AI-GENERATED */
  --ki-icon-generated-white: url("../icons/label_ai-generated_white.svg");
  --ki-icon-generated-black: url("../icons/label_ai-generated_black.svg");
  --ki-icon-generated-white-transparent: url("../icons/label_ai-generated_white-transparent.svg");
  --ki-icon-generated-black-transparent: url("../icons/label_ai-generated_black-transparent.svg");

  /* AI-MODIFIED */
  --ki-icon-modified-white: url("../icons/label_ai-modified_white.svg");
  --ki-icon-modified-black: url("../icons/label_ai-mofified_black.svg");
  --ki-icon-modified-white-transparent: url("../icons/label_ai-modified_white-transparent.svg");
  --ki-icon-modified-black-transparent: url("../icons/label_ai-modified_black-transparent.svg");
}

/* =========================================================
   Basis
   ========================================================= */

.ki-label {
  position: relative !important;
  display: inline-block;
  line-height: 0;
  overflow: hidden;

  --ki-icon: var(--ki-icon-ai-white);
  --ki-label-width: 44px;
  --ki-label-height: 44px;
}

.ki-label > img,
.ki-label > picture,
.ki-label > picture > img {
  display: block;
  width: 100%;
  height: auto;
}

.ki-label::before {
  content: "";
  position: absolute !important;
  top: auto !important;
  right: var(--ki-label-offset) !important;
  bottom: var(--ki-label-offset) !important;
  left: auto !important;
  width: var(--ki-label-width);
  height: var(--ki-label-height);
  background-image: var(--ki-icon);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  transform: none;
  z-index: var(--ki-label-z-index);
  pointer-events: none;
}

/* =========================================================
   AI
   ========================================================= */

.ki-label.ki-white {
  --ki-icon: var(--ki-icon-ai-white);
}

.ki-label.ki-black {
  --ki-icon: var(--ki-icon-ai-black);
}

.ki-label.ki-white.ki-transparent {
  --ki-icon: var(--ki-icon-ai-white-transparent);
}

.ki-label.ki-black.ki-transparent {
  --ki-icon: var(--ki-icon-ai-black-transparent);
}

/* =========================================================
   AI-GENERATED
   ========================================================= */

.ki-label.ki-generated {
  --ki-icon: var(--ki-icon-generated-white);
  --ki-label-width: 132px;
  --ki-label-height: 34px;
}

.ki-label.ki-generated.ki-white {
  --ki-icon: var(--ki-icon-generated-white);
}

.ki-label.ki-generated.ki-black {
  --ki-icon: var(--ki-icon-generated-black);
}

.ki-label.ki-generated.ki-white.ki-transparent {
  --ki-icon: var(--ki-icon-generated-white-transparent);
}

.ki-label.ki-generated.ki-black.ki-transparent {
  --ki-icon: var(--ki-icon-generated-black-transparent);
}

/* =========================================================
   AI-MODIFIED
   ========================================================= */

.ki-label.ki-modified {
  --ki-icon: var(--ki-icon-modified-white);
  --ki-label-width: 122px;
  --ki-label-height: 34px;
}

.ki-label.ki-modified.ki-white {
  --ki-icon: var(--ki-icon-modified-white);
}

.ki-label.ki-modified.ki-black {
  --ki-icon: var(--ki-icon-modified-black);
}

.ki-label.ki-modified.ki-white.ki-transparent {
  --ki-icon: var(--ki-icon-modified-white-transparent);
}

.ki-label.ki-modified.ki-black.ki-transparent {
  --ki-icon: var(--ki-icon-modified-black-transparent);
}

/* =========================================================
   Positionen
   ========================================================= */

.ki-label.ki-top-left::before {
  top: var(--ki-label-offset) !important;
  right: auto !important;
  bottom: auto !important;
  left: var(--ki-label-offset) !important;
  transform: none;
}

.ki-label.ki-top-center::before {
  top: var(--ki-label-offset) !important;
  right: auto !important;
  bottom: auto !important;
  left: 50% !important;
  transform: translateX(-50%);
}

.ki-label.ki-top-right::before {
  top: var(--ki-label-offset) !important;
  right: var(--ki-label-offset) !important;
  bottom: auto !important;
  left: auto !important;
  transform: none;
}

.ki-label.ki-center-left::before {
  top: 50% !important;
  right: auto !important;
  bottom: auto !important;
  left: var(--ki-label-offset) !important;
  transform: translateY(-50%);
}

.ki-label.ki-center::before {
  top: 50% !important;
  right: auto !important;
  bottom: auto !important;
  left: 50% !important;
  transform: translate(-50%, -50%);
}

.ki-label.ki-center-right::before {
  top: 50% !important;
  right: var(--ki-label-offset) !important;
  bottom: auto !important;
  left: auto !important;
  transform: translateY(-50%);
}

.ki-label.ki-bottom-left::before {
  top: auto !important;
  right: auto !important;
  bottom: var(--ki-label-offset) !important;
  left: var(--ki-label-offset) !important;
  transform: none;
}

.ki-label.ki-bottom-center::before {
  top: auto !important;
  right: auto !important;
  bottom: var(--ki-label-offset) !important;
  left: 50% !important;
  transform: translateX(-50%);
}

.ki-label.ki-bottom-right::before {
  top: auto !important;
  right: var(--ki-label-offset) !important;
  bottom: var(--ki-label-offset) !important;
  left: auto !important;
  transform: none;
}

/* =========================================================
   Größen
   ========================================================= */

.ki-label.ki-small {
  --ki-label-width: 34px;
  --ki-label-height: 34px;
}

.ki-label.ki-large {
  --ki-label-width: 56px;
  --ki-label-height: 56px;
}

.ki-label.ki-generated.ki-small {
  --ki-label-width: 108px;
  --ki-label-height: 28px;
}

.ki-label.ki-generated.ki-large {
  --ki-label-width: 154px;
  --ki-label-height: 40px;
}

.ki-label.ki-modified.ki-small {
  --ki-label-width: 100px;
  --ki-label-height: 28px;
}

.ki-label.ki-modified.ki-large {
  --ki-label-width: 142px;
  --ki-label-height: 40px;
}

/* =========================================================
   Mobile
   ========================================================= */

@media (max-width: 640px) {
  .ki-label {
    --ki-label-offset: 8px;
  }

  .ki-label:not(.ki-generated):not(.ki-modified):not(.ki-small):not(.ki-large) {
    --ki-label-width: 34px;
    --ki-label-height: 34px;
  }

  .ki-label.ki-generated:not(.ki-small):not(.ki-large) {
    --ki-label-width: 108px;
    --ki-label-height: 28px;
  }

  .ki-label.ki-modified:not(.ki-small):not(.ki-large) {
    --ki-label-width: 100px;
    --ki-label-height: 28px;
  }
}

/* =========================================================
   KURZDOKU

   Basis:      ki-label
   Typ:        ki-generated | ki-modified
   Farbe:      ki-white | ki-black | ki-transparent
   Position:   ki-top-left | ki-top-center | ki-top-right
               ki-center-left | ki-center | ki-center-right
               ki-bottom-left | ki-bottom-center | ki-bottom-right
   Größe:      ki-small | ki-large
   Standard:   weiß | mittel | unten rechts

   Beispiel:
   class="ki-label ki-generated ki-black ki-top-left ki-large"
   ========================================================= */