.Grid {
    background-image: radial-gradient(var(--Grid1) 2px, transparent 0);
    display: grid;
    height: fit-content;
    justify-content: center;
    width: 100%;
}

.AlignCenter {
    align-items: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.TextBreak {
    white-space: normal;
    word-wrap: break-word;
    word-break: break-word;
    hyphens: auto;
    text-wrap: pretty;
}

.Blur::before {
    content: "";
    position: absolute;
    inset: 0;
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    z-index: -1;
    transform: translateZ(0);
}

/* == Button ================================================================ */
.Button:hover,
.Button:active {
    font-family: "Poppins-Medium";
    background-color: var(--Highlight2);
    border: 2px solid var(--Highlight1);
    color: var(--HighlightText1);
}

.ButtonDisabled,
.ButtonDisabled:hover,
.ButtonDisabled:active {
    font-family: "Poppins-Medium";
    background-color: var(--Disabled2);
    border: 2px solid var(--Disabled1);
    color: var(--DisabledText1);
}

.ButtonWarning:hover,
.ButtonWarning:active {
    font-family: "Poppins-Medium";
    background-color: var(--Warning2);
    border: 2px solid var(--Warning1);
    color: var(--WarningText1);
}

.ButtonRisk:hover,
.ButtonRisk:active {
    font-family: "Poppins-Medium";
    background-color: var(--Risk2);
    border: 2px solid var(--Risk1);
    color: var(--RiskText1);
}

.ButtonDanger:hover,
.ButtonDanger:active {
    font-family: "Poppins-Medium";
    background-color: var(--Danger2);
    border: 2px solid var(--Danger1);
    color: var(--DangerText1);
}

/* == Icon ================================================================== */
.Icon,
.IconUser,
.IconAdd,
.IconRemove,
.IconEdition,
.IconInformations,
.IconSafe,
.IconWarning,
.IconDanger {
    color: var(--IconBackground);
    transition: 0.2s;
}

/* == Icon > Div ============================================================ */
.Icon>div,
.IconUser>div,
.IconAdd>div,
.IconRemove>div,
.IconEdition>div,
.IconInformations>div,
.IconSafe>div,
.IconWarning>div,
.IconDanger>div {
    transition: 0.15s;
}

/* == Icon:hover > Div ====================================================== */
.Icon:hover>input~div {
    color: var(--Icon);
}

.IconUser:hover>input~div {
    color: var(--IconUserBackground);
}

.IconAdd:hover>input~div {
    color: var(--IconAddBackground);
}

.IconRemove:hover>input~div {
    color: var(--IconRemoveBackground);
}

.IconEdition:hover>input~div {
    color: var(--IconEditionBackground);
}

.IconInformations:hover>input~div {
    color: var(--IconInformationsBackground);
}

.IconSafe:hover>input~div {
    color: var(--IconSafeBackground);
}

.IconWarning:hover>input~div {
    color: var(--IconWarningBackground);
}

.IconDanger:hover>input~div {
    color: var(--IconDangerBackground);
}

/* == Icon > Input:checked > Div ============================================ */
.Icon>input:checked~div {
    color: var(--Icon);
    background-color: var(--IconBackground);
}

.IconUser>input:checked~div {
    color: var(--IconUser);
    background-color: var(--IconUserBackground);
}

.IconAdd>input:checked~div {
    color: var(--IconAdd);
    background-color: var(--IconAddBackground);
}

.IconRemove>input:checked~div {
    color: var(--IconRemove);
    background-color: var(--IconRemoveBackground);
}

.IconEdition>input:checked~div {
    color: var(--IconEdition);
    background-color: var(--IconEditionBackground);
}

.IconInformations>input:checked~div {
    color: var(--IconInformations);
    background-color: var(--IconInformationsBackground);
}

.IconSafe>input:checked~div {
    color: var(--IconSafe);
    background-color: var(--IconSafeBackground);
}

.IconWarning>input:checked~div {
    color: var(--IconWarning);
    background-color: var(--IconWarningBackground);
}

.IconDanger>input:checked~div {
    color: var(--IconDanger);
    background-color: var(--IconDangerBackground);
}

/* == Icon:hover > Input:checked > Div ====================================== */
.Icon:hover>input:checked~div {
    color: var(--Icon);
    background-color: var(--IconBackground);
}

.IconUser:hover>input:checked~div {
    color: var(--IconUser);
    background-color: var(--IconUserBackground);
}

.IconAdd:hover>input:checked~div {
    color: var(--IconAdd);
    background-color: var(--IconAddBackground);
}

.IconRemove:hover>input:checked~div {
    color: var(--IconRemove);
    background-color: var(--IconRemoveBackground);
}

.IconEdition:hover>input:checked~div {
    color: var(--IconEdition);
    background-color: var(--IconEditionBackground);
}

.IconInformations:hover>input:checked~div {
    color: var(--IconInformations);
    background-color: var(--IconInformationsBackground);
}

.IconSafe:hover>input:checked~div {
    color: var(--IconSafe);
    background-color: var(--IconSafeBackground);
}

.IconWarning:hover>input:checked~div {
    color: var(--IconWarning);
    background-color: var(--IconWarningBackground);
}

.IconDanger:hover>input:checked~div {
    color: var(--IconDanger);
    background-color: var(--IconDangerBackground);
}