/*
 * Der Folgen-Knopf (<x-follow-button>, Kundenvorgabe vom 06.10.2026).
 *
 *   .aw-folgen--kompakt.aw-folgen--bild   auf einer Werkkarte, ueber dem Bild
 *   .aw-folgen--kompakt.aw-folgen--hell   in Listen und auf der Werkseite
 *   .aw-folgen--profil                    im Profilkopf: Follow / Unfollow
 *
 * Nur vorhandene Farbvariablen (--white, --black, --dark, --base,
 * --base-dark, --danger), und auch die Deckkraftstufen stehen so schon in
 * main.css - kein neuer Farbwert, kein Verlauf, kein Zierschatten. Das
 * Aeonwall-Violett erscheint auf Karten und Listen erst bei Hover, Fokus
 * und Druck.
 *
 * Eine Form fuer alle: die Pille. Logische Eigenschaften (inline/block),
 * damit rechts-nach-links ohne eigene Regeln stimmt.
 *
 * Zustaende: normal, Hover, Tastaturfokus, gedrueckt, laden (aria-busy),
 * gesperrt (aria-disabled), Fehler (.aw-folgen--fehler).
 */

.aw-folgen {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    margin: 0;
    border: 1px solid transparent;
    border-radius: 999px;
    font-family: inherit;
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease;
    -webkit-tap-highlight-color: transparent;
}

/*
 * Die Trefferflaeche: mindestens 44 px hoch, mittig ueber dem Knopf, nie zur
 * Seite - dort liegen Name und Likes, und die bleiben fuer sich anklickbar.
 * Ein fester Rand von 8 px reichte nicht: der Kartenknopf ist 27,6 px hoch,
 * die Flaeche kam so auf 41,6 px (gemessen am 11.10.2026). Jetzt gilt die
 * Untergrenze, ein hoeherer Knopf behaelt seine 8 px Rand.
 */
.aw-folgen--kompakt::before {
    content: "";
    position: absolute;
    inset-inline: 0;
    inset-block-start: 50%;
    block-size: max(44px, calc(100% + 16px));
    transform: translateY(-50%);
}

/* ------------------------------------------------ kompakt, auf dem Bild */

/* Flaeche und Weichzeichner wie die Kronenmarke der Karte (.gallery__premium). */
.aw-folgen--bild {
    padding: 5px 14px;
    font-size: 13px;
    color: hsl(var(--white));
    background-color: hsl(var(--black)/0.5);
    border-color: hsl(var(--white)/0.65);
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
}

.gallery__footer > .aw-folgen {
    align-self: center;
    margin-inline-start: 4px;
}

/*
 * Mit Knopf bleibt die Autorenzeile eine Zeile. Wird es eng (langer Name,
 * Zeichen, viele Likes, schmale Karte), gibt allein der Name nach - mit
 * Auslassungspunkten; Avatar, Zeichen, Knopf und Likes behalten ihre Groesse.
 * Ohne Knopf (fremde Zeile, nach dem Folgen) gilt wieder main.css.
 */
.gallery__footer:has(> .aw-folgen) {
    flex-wrap: nowrap;
}

.gallery__footer:has(> .aw-folgen) > .gallery__author {
    flex: 0 1 auto;
    min-width: 0;
}

.gallery__footer:has(> .aw-folgen) .gallery__user-name {
    display: flex;
    align-items: center;
    min-width: 0;
}

.gallery__footer:has(> .aw-folgen) .gallery__user-handle {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.gallery__footer:has(> .aw-folgen) .aw-verified,
.gallery__footer:has(> .aw-folgen) > .gallery__like-icon,
.gallery__footer:has(> .aw-folgen) > .gallery__like-num {
    flex-shrink: 0;
}

/* ------------------------------------------------ kompakt, auf hellem Grund */

.aw-folgen--hell {
    padding: 6px 16px;
    font-size: 14px;
    color: hsl(var(--dark));
    background-color: transparent;
    border-color: hsl(var(--dark)/0.5);
}

/* In den Mitgliederkarten unten und mittig, wie zuvor der alte Knopf. Nach
   unten schiebt ihn der automatische Rand der Berufszeile darueber (Liste,
   Profilreiter: dort ist der Kartenrumpf eine Spalte). Die Suche setzt den
   Rumpf nicht als Spalte - dort mittet ihn der automatische Rand zur Seite. */
.contributor__body > .aw-folgen {
    display: flex;
    width: fit-content;
    align-self: center;
    margin-block-start: 12px;
    margin-inline: auto;
}

/* Auf der Werkseite rechts neben dem Namen. */
.awu-det__creator > .aw-folgen {
    margin-inline-start: auto;
}

/* Hover, Fokus und Druck tragen das Violett - auf Karten und in Listen. */
.aw-folgen--kompakt:hover,
.aw-folgen--kompakt:focus-visible {
    color: hsl(var(--white));
    background-color: hsl(var(--base));
    border-color: hsl(var(--base));
}

.aw-folgen--kompakt:active {
    color: hsl(var(--white));
    background-color: hsl(var(--base-dark));
    border-color: hsl(var(--base-dark));
}

/* ------------------------------------------------ Profil
 *
 * So hoch und so gross beschriftet wie der Message-Knopf daneben
 * (main.css, .user-profile__info .message-btn button: 16 px, 48 px hoch),
 * damit die Zeile ruhig steht - aber in der Form der Pille.
 */

.aw-folgen--profil {
    min-height: 48px;
    padding: 0 30px;
    font-size: 16px;
    color: hsl(var(--white));
    background-color: hsl(var(--base));
    border-color: hsl(var(--base));
}

.aw-folgen--profil:hover,
.aw-folgen--profil:active {
    background-color: hsl(var(--base-dark));
    border-color: hsl(var(--base-dark));
}

/* Unfollow: neutral umrandet; die Warnfarbe erst bei Hover und Fokus, und
   dann nur als Rand und Hauch - der Text bleibt dunkel und gut lesbar. */
.aw-folgen--profil.aw-folgen--gefolgt {
    color: hsl(var(--dark));
    background-color: transparent;
    border-color: hsl(var(--dark)/0.4);
}

.aw-folgen--profil.aw-folgen--gefolgt:hover,
.aw-folgen--profil.aw-folgen--gefolgt:focus-visible {
    color: hsl(var(--dark));
    background-color: hsl(var(--danger)/0.1);
    border-color: hsl(var(--danger));
}

.aw-folgen--profil.aw-folgen--gefolgt:active {
    background-color: hsl(var(--danger)/0.15);
    border-color: hsl(var(--danger));
}

/* ------------------------------------------------ Tastaturfokus
 *
 * Mindestens 3 px, wie in focus-visible.css. Dort traegt auf einer Flaeche in
 * Markenfarbe Dunkel den Ring statt Violett - hier ebenso, denn Follow ist im
 * Fokus violett. Auf dem Bild kommt ein weisser Ring dazu: Weiss traegt auf
 * dunklem Grund, Dunkel auf hellem.
 */
.aw-folgen:focus-visible {
    outline: 3px solid hsl(var(--dark)) !important;
    outline-offset: 3px !important;
}

.aw-folgen--profil.aw-folgen--gefolgt:focus-visible {
    outline-color: hsl(var(--base)) !important;
}

.aw-folgen--bild:focus-visible {
    box-shadow: 0 0 0 3px hsl(var(--white));
}

/* ------------------------------------------------ Laden und gesperrt
 *
 * Waehrend der Anfrage ist der Knopf gesperrt (aria-disabled) und meldet
 * sich beschaeftigt (aria-busy). Er behaelt seine Breite: das Drehzeichen
 * sitzt im Innenabstand, damit die Zeile nicht springt.
 */

.aw-folgen[aria-disabled="true"] {
    cursor: not-allowed;
    opacity: .75;
}

.aw-folgen[aria-busy="true"] {
    cursor: progress;
}

/* Gesperrt reagiert er nicht auf Hover - er bleibt, wie er war. */
.aw-folgen--bild[aria-disabled="true"]:hover {
    color: hsl(var(--white));
    background-color: hsl(var(--black)/0.5);
    border-color: hsl(var(--white)/0.65);
}

.aw-folgen--hell.aw-folgen--kompakt[aria-disabled="true"]:hover {
    color: hsl(var(--dark));
    background-color: transparent;
    border-color: hsl(var(--dark)/0.5);
}

/* Der Innenabstand wandert zur Seite des Drehzeichens; die Summe - und
   damit die Breite des Knopfs - bleibt gleich. */
.aw-folgen--bild[aria-busy="true"] {
    padding-inline: 8px 20px;
}

.aw-folgen--hell.aw-folgen--kompakt[aria-busy="true"] {
    padding-inline: 10px 22px;
}

.aw-folgen--profil[aria-busy="true"] {
    padding-inline: 20px 40px;
}

.aw-folgen[aria-busy="true"]::after {
    content: "";
    position: absolute;
    inset-inline-end: 5px;
    top: 50%;
    width: 10px;
    height: 10px;
    margin-top: -5px;
    border: 2px solid currentColor;
    border-inline-end-color: transparent;
    border-radius: 50%;
    animation: aw-folgen-dreht .7s linear infinite;
}

.aw-folgen--profil[aria-busy="true"]::after {
    inset-inline-end: 14px;
    width: 14px;
    height: 14px;
    margin-top: -7px;
}

/* ------------------------------------------------ Fehler
 *
 * Gesagt wird der Fehler ueber notify() (Einblendung und Live-Bereich); am
 * Knopf bleibt ein roter Rand, bis er wieder benutzt wird.
 */
.aw-folgen--fehler,
.aw-folgen--fehler:hover {
    border-color: hsl(var(--danger));
}

@keyframes aw-folgen-dreht {
    to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
    .aw-folgen {
        transition: none;
    }

    .aw-folgen[aria-busy="true"]::after {
        animation: none;
    }
}

/* Erzwungene Farben (Windows-Kontrastmodus): Hintergruende entfallen dort,
   der Rand traegt den Knopf. */
@media (forced-colors: active) {
    .aw-folgen {
        border-color: ButtonText;
    }

    .aw-folgen:focus-visible {
        outline-color: Highlight !important;
    }
}