:root {

    --default-icon-font-size: 20px;
    --small-icon-font-size: 14px;
    --pseudo-to-icon-ratio: 1.5;

    /* Default Colors*/
    --icon-primary-color: var(--oxford-solid-60);
    --icon-secondary-color: var(--oxford-solid-60);

    --icon-primary-color-light: var(--oxford-solid-1);
    --icon-secondary-color-light: var(--oxford-solid-1);

    --icon-primary-color-opacity: 1;
    --icon-secondary-color-opacity: 0.4;

    --icon-secondary-color-opacity-full: 1;
    --icon-primary-color-opacity-hover: 1;
}

/* Base styling for icons */
.icon {
    font-family: "Font Awesome 6 Duotone";
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    font-size: var(--default-icon-font-size);
    width: calc(var(--pseudo-to-icon-ratio) * var(--default-icon-font-size));
    height: calc(var(--pseudo-to-icon-ratio) * var(--default-icon-font-size));
}

.icon::before,
.icon::after {
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    max-width: 100%;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    box-sizing: border-box;
}

.icon::before {
    color: var(--icon-primary-color);
    opacity: var(--icon-primary-color-opacity);
}

.icon::after {
    color: var(--icon-secondary-color);
    opacity: var(--icon-secondary-color-opacity);
}




/* Links with Icons */

.link-with-icon {
    display: inline-flex;
    align-items: center;
    gap: 0.4em;
    /* space between icon and text */
    text-decoration: none;
    /* optional: remove underline */
}

.link-with-icon .icon {
    display: inline-block;
    font-size: 1em;
    /* match text size or adjust */
    line-height: 1;
    vertical-align: middle;
}

/* Icons in Input-Feldern wie Copy-Buttons */
.input-field-wrapper .icon {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
}

/* Defaul behavior */
.icon-copy,
.icon-print,
.icon-link,
.icon-minimize,
.icon-maximize {
    cursor: pointer;
}

.icon-copy:hover::after,
.icon-link:hover::after,
.icon-minimize:hover::after,
.icon-maximize:hover::after {
    opacity: var(--icon-secondary-color-opacity-full);
}


/* Icons Special Behavior */
.icon-minimize,
.icon-maximize {
    font-size: var(--small-icon-font-size);
}

/* Icon Light / Icons on Dark Background */
.icon-light::after {
    color: var(--icon-primary-color-light);
}

.icon-light::before {
    color: var(--icon-secondary-color-light);
}

/* Hover */

.hoverable {
    cursor: pointer;
}

.hoverable:hover:before,
.hoverable:hover:after {
    font-weight: 600;
}

.hoverable:hover::after {
    opacity: var(--icon-secondary-color-opacity-full);
}




/* Anmiations */

/* Fade Color*/
@keyframes fadeLoop {

    0%,
    100% {
        opacity: 1;
        /* Fully visible */
    }

    50% {
        opacity: 0.2;
        /* 50% visible - adjust as needed */
    }
}

.fade {
    animation: fadeLoop 2s infinite ease-in-out;
}

:root {

    /* Zurück */
    --icon-chevron-left-primary: "\f053";
    --icon-chevron-left-secondary: "\f053\f053";

    /* Minimieren */
    --icon-minimize-primary: "\e092";
    --icon-minimize-secondary: "\e092\e092";

    /* Max­imieren */
    --icon-maximize-primary: "\e0a0";
    --icon-maximize-secondary: "\e0a0\e0a0";

    /* Fullscreen */
    --icon-fullscreen-primary: "\f065";
    --icon-fullscreen-secondary: "\f065\f065";

    /* Drucken */
    --icon-print-primary: "\f02f";
    --icon-print-secondary: "\f02f\f02f";

    /* User */
    --icon-user-primary: "\f007";
    --icon-user-secondary: "\f007\f007";

    /* User Attendance List */
    --icon-user-attendance-list-primary: "\f4fc";
    --icon-user-attendance-list-secondary: "\f4fc\f4fc";

    /* Open Modal / Modulinformationen */
    --icon-modal-open-primary: "\e24f";
    --icon-modal-open-secondary: "\e24f\e24f";

    /* Doz. Übersicht */
    --icon-dashboard-internal-primary: "\f5fd";
    --icon-dashboard-internal-secondary: "\f5fd\f5fd";

    /* Tools */
    --icon-tools-primary: "\f61f";
    --icon-tools-secondary: "\f61f\f61f";

    /* Präsenzseminar */
    --icon-in-person-primary: "\f51c";
    --icon-in-person-secondary: "\f51c\f51c";

    /* Ort */
    --icon-location-primary: "\f041";
    --icon-location-secondary: "\f041\f041";

    /* Raum */
    --icon-room-primary: "\f52b";
    --icon-room-secondary: "\f52b\f52b";

    /* Online Seminar */
    --icon-online-primary: "\f109";
    --icon-online-secondary: "\f109\f109";

    /* Join Online Seminar */
    --icon-join-primary: "\f4e1";
    --icon-join-secondary: "\f4e1\f4e1";

    /* Rechnung */
    --icon-invoice-primary: "\f570";
    --icon-invoice-secondary: "\f570\f570";

    /* Abgaben / Leistungen */
    --icon-assignment-primary: "\f0ae";
    --icon-assignment-secondary: "\f0ae\f0ae";

    /* Copy */
    --icon-copy-primary: "\f0c5";
    --icon-copy-secondary: "\f0c5\f0c5";

    /* Teilen */
    --icon-share-primary: "\f064";
    --icon-share-secondary: "\f064\f064";

    /* Link */
    --icon-link-primary: "\f0c1";
    --icon-link-secondary: "\f0c1\f0c1";

    /* Unterlagen */
    --icon-files-primary: "\f07c";
    --icon-files-secondary: "\f07c\f07c";

    /* Upload */
    --icon-upload-primary: "\f56f";
    --icon-upload-secondary: "\f56f\f56f";

    /* Upload Cloud Arrow Up */
    --icon-upload-cloud-arrow-primary: "\f0ee";
    --icon-upload-cloud-arrow-secondary: "\f0ee\f0ee";

    /* File Default */
    --icon-file-default-primary: "\f15b";
    --icon-file-default-secondary: "\f15b\f15b";

    /* File DOC */
    --icon-file-doc-primary: "\e5ed";
    --icon-file-doc-secondary: "\e5ed\e5ed";

    /* File PPT */
    --icon-file-ppt-primary: "\e64a";
    --icon-file-ppt-secondary: "\e64a\e64a";

    /* File PDF */
    --icon-file-pdf-primary: "\f1c1";
    --icon-file-pdf-secondary: "\f1c1\f1c1";

    /* File Audio */
    --icon-file-audio-primary: "\f1c7";
    --icon-file-audio-secondary: "\f1c7\f1c7";

    /* File Video */
    --icon-file-video-primary: "\f1c8";
    --icon-file-video-secondary: "\f1c8\f1c8";

    /* File Image */
    --icon-file-image-primary: "\f1c5";
    --icon-file-image-secondary: "\f1c5\f1c5";

    /* Dashboard/Übersicht */
    --icon-dashboard-primary: "\e5da";
    --icon-dashboard-secondary: "\e5da\e5da";

    /* Termine/Seminartage */
    --icon-date-primary: "\f783";
    --icon-date-secondary: "\f783\f783";

    /* Veranstaltungen/Events */
    --icon-events-primary: "\e0d7";
    --icon-events-secondary: "\e0d7\e0d7";

    /* Module */
    --icon-modules-primary: "\e0d6";
    --icon-modules-secondary: "\e0d6\e0d6";

    /* Status Circle */
    --icon-circle-primary: "\f111";
    --icon-circle-secondary: "\f111\f111";

    /* Status Circle Check */
    --icon-circle-check-primary: "\f058";
    --icon-circle-check-secondary: "\f058\f058";

    /* Status Circle X-Mark */
    --icon-circle-xmark-primary: "\f057";
    --icon-circle-xmark-secondary: "\f057\f057";

    /* Status Circle Info */
    --icon-circle-info-primary: "\f05a";
    --icon-circle-info-secondary: "\f05a\f05a";

    /* Check */
    --icon-check-primary: "\f00c";
    --icon-check-secondary: "\f00c\f00c";

    /* X-Mark */
    --icon-xmark-primary: "\f00d";
    --icon-xmark-secondary: "\f00d\f00d";

    /* Info */
    --icon-info-primary: "\f129";
    --icon-info-secondary: "\f129\f129";

    /* Question */
    --icon-question-primary: "\3f";
    --icon-question-secondary: "\3f\3f";

}







/* Specific Icon Styles */


/* Zurück */
.icon-chevron-left::before {
    content: var(--icon-chevron-left-primary);
}

.icon-chevron-left::after {
    content: var(--icon-chevron-left-secondary);
}

/* Minimieren */
.icon-minimize::before {
    content: var(--icon-minimize-primary);
}

.icon-minimize::after {
    content: var(--icon-minimize-secondary);
}

/* Max­imieren */
.icon-maximize::before {
    content: var(--icon-maximize-primary);
}

.icon-maximize::after {
    content: var(--icon-maximize-secondary);
}

/* Fullscreen */
.icon-fullscreen::before {
    content: var(--icon-fullscreen-primary);
}

.icon-fullscreen::after {
    content: var(--icon-fullscreen-secondary);
}

/* Drucken */
.icon-print::before {
    content: var(--icon-print-primary);
}

.icon-print::after {
    content: var(--icon-print-secondary);
}

/* User */
.icon-user::before {
    content: var(--icon-user-primary);
}

.icon-user::after {
    content: var(--icon-user-secondary);
}

/* User Attendance List */

.icon-user-attendance-list::before {
    content: var(--icon-user-attendance-list-primary);
}

.icon-user-attendance-list::after {
    content: var(--icon-user-attendance-list-secondary);
}

/* Open Modal / Modulinformationen */

.icon-modal-open::before {
    content: var(--icon-modal-open-primary);
}

.icon-modal-open::after {
    content: var(--icon-modal-open-secondary);
}

/* Doz. Übersicht */
.icon-dashboard-internal::before {
    content: var(--icon-dashboard-internal-primary);
}

.icon-dashboard-internal::after {
    content: var(--icon-dashboard-internal-secondary);
}

/* Tools */
.icon-tools::before {
    content: var(--icon-tools-primary);
}

.icon-tools::after {
    content: var(--icon-tools-secondary);
}

/* Präsenzseminar */
.icon-in-person::before {
    content: var(--icon-in-person-primary);
}

.icon-in-person::after {
    content: var(--icon-in-person-secondary);
}

/* Ort */
.icon-location::before {
    content: var(--icon-location-primary);
}

.icon-location::after {
    content: var(--icon-location-secondary);
}

/* Raum */
.icon-room::before {
    content: var(--icon-room-primary);
}

.icon-room::after {
    content: var(--icon-room-secondary);
}

/* Online Seminar */
.icon-online::before {
    content: var(--icon-online-primary);
}

.icon-online::after {
    content: var(--icon-online-secondary);
}

/* Join Online Seminar */
.icon-join::before {
    content: var(--icon-join-primary);
}

.icon-join::after {
    content: var(--icon-join-secondary);
}

/* Rechnung */
.icon-invoice::before {
    content: var(--icon-invoice-primary);
}

.icon-invoice::after {
    content: var(--icon-invoice-secondary);
}

/* Abgaben / Leistungen */
.icon-assignment::before {
    content: var(--icon-assignment-primary);
}

.icon-assignment::after {
    content: var(--icon-assignment-secondary);
}

/* Copy */
.icon-copy::before {
    content: var(--icon-copy-primary);
}

.icon-copy::after {
    content: var(--icon-copy-secondary);
}

/* Teilen */
.icon-share::before {
    content: var(--icon-share-primary);
}

.icon-share::after {
    content: var(--icon-share-secondary);
}

/* Link */
.icon-link::before {
    content: var(--icon-link-primary);
}

.icon-link::after {
    content: var(--icon-link-secondary);
}

/* Unterlagen */
.icon-files::before {
    content: var(--icon-files-primary);
}

.icon-files::after {
    content: var(--icon-files-secondary);
}

/* Upload */
.icon-upload::before {
    content: var(--icon-upload-primary);
}

.icon-upload::after {
    content: var(--icon-upload-secondary);
}


/* Upload Cloud Arrow */
.icon-upload-cloud-arrow::before {
    content: var(--icon-upload-cloud-arrow-primary);
}

.icon-upload-cloud-arrow::after {
    content: var(--icon-upload-cloud-arrow-secondary);
}


/* File Default */
.icon-file-default::before {
    content: var(--icon-file-default-primary);
}

.icon-file-default::after {
    content: var(--icon-file-default-secondary);
}

/* File DOC */
.icon-file-doc::before {
    content: var(--icon-file-doc-primary);
}

.icon-file-doc::after {
    content: var(--icon-file-doc-secondary);
}

/* File PPT */
.icon-file-ppt::before {
    content: var(--icon-file-ppt-primary);
}

.icon-file-ppt::after {
    content: var(--icon-file-ppt-secondary);
}

/* File PDF */
.icon-file-pdf::before {
    content: var(--icon-file-pdf-primary);
}

.icon-file-pdf::after {
    content: var(--icon-file-pdf-secondary);
}

/* File Audio */
.icon-file-audio::before {
    content: var(--icon-file-audio-primary);
}

.icon-file-audio::after {
    content: var(--icon-file-audio-secondary);
}

/* File Video */
.icon-file-video::before {
    content: var(--icon-file-video-primary);
}

.icon-file-video::after {
    content: var(--icon-file-video-secondary);
}

/* File Image */
.icon-file-image::before {
    content: var(--icon-file-image-primary);
}

.icon-file-image::after {
    content: var(--icon-file-image-secondary);
}

/* Dashboard/Übersicht */
.icon-dashboard::before {
    content: var(--icon-dashboard-primary);
}

.icon-dashboard::after {
    content: var(--icon-dashboard-secondary);
}

/* Termine/Seminartage */
.icon-date::before {
    content: var(--icon-date-primary);
}

.icon-date::after {
    content: var(--icon-date-secondary);
}

/* Veranstaltungen/Events */
.icon-events::before {
    content: var(--icon-events-primary);
}

.icon-events::after {
    content: var(--icon-events-secondary);
}

/* Module */
.icon-modules::before {
    content: var(--icon-modules-primary);
}

.icon-modules::after {
    content: var(--icon-modules-secondary);
}


/* Status Circle */
.icon-circle::before {
    content: var(--icon-circle-primary);
}

.icon-circle::after {
    content: var(--icon-circle-secondary);
}


/* Status Circle Check */
.icon-circle-check::before {
    content: var(--icon-circle-check-primary);
}

.icon-circle-check::after {
    content: var(--icon-circle-check-secondary);
}


/* Status Circle X-Mark */
.icon-circle-xmark::before {
    content: var(--icon-circle-xmark-primary);
}

.icon-circle-xmark::after {
    content: var(--icon-circle-xmark-secondary);
}


/* Status Circle Info */
.icon-circle-info::before {
    content: var(--icon-circle-info-primary);
}

.icon-circle-info::after {
    content: var(--icon-circle-info-secondary);
}


/* Check */
.icon-check::before {
    content: var(--icon-check-primary);
}

.icon-check::after {
    content: var(--icon-check-secondary);
}

/* X-Mark */
.icon-xmark::before {
    content: var(--icon-xmark-primary);
}

.icon-xmark::after {
    content: var(--icon-xmark-secondary);
}

/* Info */
.icon-info::before {
    content: var(--icon-info-primary);
}

.icon-info::after {
    content: var(--icon-info-secondary);
}

/* Question */
.icon-question::before {
    content: var(--icon-question-primary);
}

.icon-question::after {
    content: var(--icon-question-secondary);
}



/* Icon Confirm*/
.icon.confirm::before {

    color: var(--status-good);
}

.icon.confirm::after {
    color: var(--status-good);
}

/* Icon Error */
.icon.error::before {
    color: var(--status-error);
}

.icon.error::after {
    color: var(--status-error);

}

/* Icon Notice */
.icon.notice::before {
    color: var(--status-notice);
}

.icon.notice::after {
    color: var(--status-notice);

}