/*
    COLORS
    #303030 RGB(48,48,48) CHARCOAL
    #D4D4D4 RGB(212,212,212) GRAY
    #585858 RGB(88,88,88) DARK GRAY
    #808080 RGB(128,128,128) GLOW GRAY
*/

/*LEGACY*/
.hello-btn-dark,
.hello-btn-light {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    width: 16rem;
    height: 3rem;
    border-radius: 0.4rem;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 0 0px 1px #303030;
}

.hello-btn-dark:disabled,
.hello-btn-light:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    box-shadow: 0 0 0px 1px #303030 !important;
}

.hello-btn-dark {
    background-color: #303030;
    color: white;
}

.hello-btn-light:is(:hover, :active, :focus),
.hello-btn-dark:is(:hover, :active, :focus) {
    box-shadow: 0 0 0px 2px #303030;
}

.hello-btn-light {
    background-color: white;
    color: #303030;
}

/*LEGACY*/


/* BASE CLASSES */
.hello-btn-black-on-light,
.hello-btn-black-on-dark,
.hello-btn-white-on-light,
.hello-btn-white-on-dark,
.hello-btn-white-and-invert,
.hello-btn-black-and-invert,
.hello-btn-black-and-static,
.hello-btn-white-and-static {
    position: relative;
    padding: 0.8rem 1.6rem;
    border-radius: 0.4rem;
    font-size: 1rem;
    cursor: pointer;
    font-weight: 600;
    border: none;
    outline: none;
    user-select: none;
    line-height: 1.5;
    /* BUTTON TEXT CENETERED ON BOTH AXIS IF WIDTH OVERRIDDEN */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* BUTTON TEXT CENETERED ON BOTH AXIS IF WIDTH OVERRIDDEN */
}

.hello-btn-black-on-light:disabled,
.hello-btn-black-on-dark:disabled,
.hello-btn-white-on-light:disabled,
.hello-btn-white-on-dark:disabled,
.hello-btn-white-and-invert:disabled,
.hello-btn-black-and-invert:disabled,
.hello-btn-black-and-static:disabled,
.hello-btn-white-and-static:disabled {
    cursor: not-allowed;
}

.hello-btn-loader {
    color: transparent !important;
}

.hello-btn-loader::after {
    width: 96%;
    height: 96%;
    background-size: 50% 50% !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    position: absolute;
    content: '';
}

/* BASE CLASSES */

/* LIGHT */
.hello-btn-black-on-light {
    background: #303030;
    color: white;
    box-shadow: 0 0 0 1px #303030;
}

.hello-btn-black-on-light:disabled {
    color: white;
}

.hello-btn-white-on-light {
    background: white;
    color: #303030;
    box-shadow: 0 0 0 1px #303030;
}

.hello-btn-white-on-light {
    color: #303030;
}

.hello-btn-black-on-light.hello-btn-loader::after {
    background-image: url("data:image/svg+xml,%3Csvg class='animate-spin' style='color: rgb(255,255,255);' xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24'%3E%3Cstyle%3E .animate-spin%7Banimation: spin 1s linear infinite;%7D @keyframes spin %7B from %7B transform: rotate(0deg); %7D to %7B transform: rotate(360deg); %7D %7D %3C/style%3E%3Ccircle style='opacity: 0.25' cx='12' cy='12' r='10' stroke='currentColor' stroke-width='4'%3E%3C/circle%3E%3Cpath class='opacity-75' fill='currentColor' d='M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z'%3E%3C/path%3E%3C/svg%3E");
}

.hello-btn-white-on-light.hello-btn-loader::after {
    background-image: url("data:image/svg+xml,%3Csvg class='animate-spin' style='color: rgb(48,48,48);' xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24'%3E%3Cstyle%3E .animate-spin%7Banimation: spin 1s linear infinite;%7D @keyframes spin %7B from %7B transform: rotate(0deg); %7D to %7B transform: rotate(360deg); %7D %7D %3C/style%3E%3Ccircle style='opacity: 0.25' cx='12' cy='12' r='10' stroke='currentColor' stroke-width='4'%3E%3C/circle%3E%3Cpath class='opacity-75' fill='currentColor' d='M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z'%3E%3C/path%3E%3C/svg%3E");
}

/* LIGHT */

/* DARK */
.hello-btn-black-on-dark {
    background: #303030;
    color: white;
    box-shadow: 0 0 0 2px rgb(88, 88, 88);
}

.hello-btn-black-on-dark:disabled {
    color: white;
}

.hello-btn-white-on-dark {
    background: rgb(212, 212, 212);
    color: #303030;
    box-shadow: 0 0 0 1px rgb(212, 212, 212);
}

.hello-btn-white-on-dark:disabled {
    color: #303030;
}

.hello-btn-black-on-dark.hello-btn-loader::after {
    background-image: url("data:image/svg+xml,%3Csvg class='animate-spin' style='color: rgb(48,48,48);' xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24'%3E%3Cstyle%3E .animate-spin%7Banimation: spin 1s linear infinite;%7D @keyframes spin %7B from %7B transform: rotate(0deg); %7D to %7B transform: rotate(360deg); %7D %7D %3C/style%3E%3Ccircle style='opacity: 0.25' cx='12' cy='12' r='10' stroke='currentColor' stroke-width='4'%3E%3C/circle%3E%3Cpath class='opacity-75' fill='currentColor' d='M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z'%3E%3C/path%3E%3C/svg%3E");
}

.hello-btn-black-on-dark.hello-btn-loader::after {
    background-image: url("data:image/svg+xml,%3Csvg class='animate-spin' style='color: rgb(255,255,255);' xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24'%3E%3Cstyle%3E .animate-spin%7Banimation: spin 1s linear infinite;%7D @keyframes spin %7B from %7B transform: rotate(0deg); %7D to %7B transform: rotate(360deg); %7D %7D %3C/style%3E%3Ccircle style='opacity: 0.25' cx='12' cy='12' r='10' stroke='currentColor' stroke-width='4'%3E%3C/circle%3E%3Cpath class='opacity-75' fill='currentColor' d='M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z'%3E%3C/path%3E%3C/svg%3E");
}

/* DARK */

/* STATIC */
@media (prefers-color-scheme: dark) {
    .hello-btn-black-and-static {
        background: rgb(48, 48, 48);
        color: rgb(212, 212, 212);
        box-shadow: 0 0 0 2px rgb(88, 88, 88);
    }

    .hello-btn-black-and-static:disabled {
        color: rgb(212, 212, 212);
    }

    .hello-btn-white-and-static {
        background: rgb(212, 212, 212);
        color: rgb(48, 48, 48);
        box-shadow: 0 0 0 1px rgb(212, 212, 212);
    }

    .hello-btn-white-and-static:disabled {
        color: rgb(48, 48, 48);
    }

    .hello-btn-white-and-static.hello-btn-loader::after {
        background-image: url("data:image/svg+xml,%3Csvg class='animate-spin' style='color: rgb(48,48,48);' xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24'%3E%3Cstyle%3E .animate-spin%7Banimation: spin 1s linear infinite;%7D @keyframes spin %7B from %7B transform: rotate(0deg); %7D to %7B transform: rotate(360deg); %7D %7D %3C/style%3E%3Ccircle style='opacity: 0.25' cx='12' cy='12' r='10' stroke='currentColor' stroke-width='4'%3E%3C/circle%3E%3Cpath class='opacity-75' fill='currentColor' d='M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z'%3E%3C/path%3E%3C/svg%3E");
    }
}

@media (prefers-color-scheme: light) {
    .hello-btn-black-and-static {
        background: rgb(48, 48, 48);
        color: white;
        box-shadow: 0 0 0 1px rgb(48, 48, 48);
    }

    .hello-btn-black-and-static:disabled {
        color: white;
    }

    .hello-btn-white-and-static {
        background: white;
        color: rgb(48, 48, 48);
        box-shadow: 0 0 0 1px rgb(48, 48, 48);
    }

    .hello-btn-white-and-static:disabled {
        color: rgb(48, 48, 48);
    }

    .hello-btn-black-and-static.hello-btn-loader::after {
        background-image: url("data:image/svg+xml,%3Csvg class='animate-spin' style='color: rgb(255,255,255);' xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24'%3E%3Cstyle%3E .animate-spin%7Banimation: spin 1s linear infinite;%7D @keyframes spin %7B from %7B transform: rotate(0deg); %7D to %7B transform: rotate(360deg); %7D %7D %3C/style%3E%3Ccircle style='opacity: 0.25' cx='12' cy='12' r='10' stroke='currentColor' stroke-width='4'%3E%3C/circle%3E%3Cpath class='opacity-75' fill='currentColor' d='M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z'%3E%3C/path%3E%3C/svg%3E");
    }
}

/* STATIC */

/* INVERT */
@media (prefers-color-scheme: dark) {
    .hello-btn-black-and-invert {
        background: rgb(212, 212, 212);
        color: rgb(48, 48, 48);
        box-shadow: 0 0 0 1px rgb(212, 212, 212);
    }

    .hello-btn-black-and-invert:disabled {
        color: rgb(48, 48, 48);
    }

    .hello-btn-white-and-invert {
        background: rgb(48, 48, 48);
        color: rgb(212, 212, 212);
        box-shadow: 0 0 0 2px rgb(88, 88, 88);
    }

    .hello-btn-white-and-invert:disabled {
        color: rgb(212, 212, 212);
    }

    .hello-btn-white-and-invert.hello-btn-loader::after {
        background-image: url("data:image/svg+xml,%3Csvg class='animate-spin' style='color: rgb(212,212,212);' xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24'%3E%3Cstyle%3E .animate-spin%7Banimation: spin 1s linear infinite;%7D @keyframes spin %7B from %7B transform: rotate(0deg); %7D to %7B transform: rotate(360deg); %7D %7D %3C/style%3E%3Ccircle style='opacity: 0.25' cx='12' cy='12' r='10' stroke='currentColor' stroke-width='4'%3E%3C/circle%3E%3Cpath class='opacity-75' fill='currentColor' d='M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z'%3E%3C/path%3E%3C/svg%3E");
    }
}

@media (prefers-color-scheme: light) {
    .hello-btn-black-and-invert {
        background: rgb(48, 48, 48);
        color: white;
        box-shadow: 0 0 0 1px rgb(48, 48, 48);
    }

    .hello-btn-black-and-invert:disabled {
        color: white;
    }

    .hello-btn-white-and-invert {
        background: white;
        color: rgb(48, 48, 48);
        box-shadow: 0 0 0 1px rgb(48, 48, 48);
    }

    .hello-btn-white-and-invert:disabled {
        color: rgb(48, 48, 48);
    }

    .hello-btn-white-and-invert.hello-btn-loader::after {
        background-image: url("data:image/svg+xml,%3Csvg class='animate-spin' style='color: rgb(48,48,48);' xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24'%3E%3Cstyle%3E .animate-spin%7Banimation: spin 1s linear infinite;%7D @keyframes spin %7B from %7B transform: rotate(0deg); %7D to %7B transform: rotate(360deg); %7D %7D %3C/style%3E%3Ccircle style='opacity: 0.25' cx='12' cy='12' r='10' stroke='currentColor' stroke-width='4'%3E%3C/circle%3E%3Cpath class='opacity-75' fill='currentColor' d='M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z'%3E%3C/path%3E%3C/svg%3E");
    }
}

/* INVERT */

/* INVERT POP */
@media (prefers-color-scheme: dark) {
    .hello-btn-black-and-invert:is(:hover, :active, :focus):not(:disabled) {
        box-shadow: 0 0 0 2px rgb(212, 212, 212);
    }

    .hello-btn-white-and-invert:is(:hover, :active, :focus):not(:disabled) {
        box-shadow: 0 0 0 3px rgb(88, 88, 88);
    }
}

@media (prefers-color-scheme: light) {
    .hello-btn-black-and-invert:is(:hover, :active, :focus):not(:disabled) {
        box-shadow: 0 0 0 2px rgb(48, 48, 48);
    }

    .hello-btn-white-and-invert:is(:hover, :active, :focus):not(:disabled) {
        box-shadow: 0 0 0 2px rgb(88, 88, 88);
    }
}

/* INVERT POP */

/* GLOW */
.hello-btn-black-on-light.hello-btn-hover-glow:is(:hover, :active, :focus):not(:disabled) {
    box-shadow: 0 0 3px 3px rgba(128, 128, 128, 0.7);
}

.hello-btn-white-on-light.hello-btn-hover-glow:is(:hover, :active, :focus):not(:disabled) {
    box-shadow: 0 0 3px 3px rgba(128, 128, 128, 0.7);
}

.hello-btn-black-on-dark.hello-btn-hover-glow:is(:hover, :active, :focus):not(:disabled) {
    box-shadow: 0 0 3px 3px rgba(128, 128, 128, 0.7);
}

.hello-btn-white-on-dark.hello-btn-hover-glow:is(:hover, :active, :focus):not(:disabled) {
    box-shadow: 0 0 3px 3px rgba(212, 212, 212, 0.7);
}

.hello-btn-white-on-dark.hello-btn-loader::after {
    background-image: url("data:image/svg+xml,%3Csvg class='animate-spin' style='color: rgb(48,48,48);' xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24'%3E%3Cstyle%3E .animate-spin%7Banimation: spin 1s linear infinite;%7D @keyframes spin %7B from %7B transform: rotate(0deg); %7D to %7B transform: rotate(360deg); %7D %7D %3C/style%3E%3Ccircle style='opacity: 0.25' cx='12' cy='12' r='10' stroke='currentColor' stroke-width='4'%3E%3C/circle%3E%3Cpath class='opacity-75' fill='currentColor' d='M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z'%3E%3C/path%3E%3C/svg%3E");
}

@media (prefers-color-scheme: dark) {
    .hello-btn-white-and-invert.hello-btn-hover-glow:is(:hover, :active, :focus):not(:disabled) {
        box-shadow: 0 0 3px 3px rgba(128, 128, 128, 0.7);
    }

    .hello-btn-white-and-static.hello-btn-hover-glow:is(:hover, :active, :focus):not(:disabled) {
        box-shadow: 0 0 3px 3px rgba(212, 212, 212, 0.7);
    }

    .hello-btn-black-and-static.hello-btn-hover-glow:is(:hover, :active, :focus):not(:disabled) {
        box-shadow: 0 0 3px 3px rgba(128, 128, 128, 0.7);
    }

    .hello-btn-black-and-invert.hello-btn-hover-glow:is(:hover, :active, :focus):not(:disabled) {
        box-shadow: 0 0 3px 3px rgba(212, 212, 212, 0.7);
    }

    .hello-btn-black-and-invert.hello-btn-loader::after {
        background-image: url("data:image/svg+xml,%3Csvg class='animate-spin' style='color: rgb(48,48,48);' xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24'%3E%3Cstyle%3E .animate-spin%7Banimation: spin 1s linear infinite;%7D @keyframes spin %7B from %7B transform: rotate(0deg); %7D to %7B transform: rotate(360deg); %7D %7D %3C/style%3E%3Ccircle style='opacity: 0.25' cx='12' cy='12' r='10' stroke='currentColor' stroke-width='4'%3E%3C/circle%3E%3Cpath class='opacity-75' fill='currentColor' d='M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z'%3E%3C/path%3E%3C/svg%3E");
    }
}

@media (prefers-color-scheme: light) {
    .hello-btn-black-and-invert.hello-btn-hover-glow:is(:hover, :active, :focus):not(:disabled) {
        box-shadow: 0 0 3px 3px rgba(128, 128, 128, 0.7);
    }

    .hello-btn-white-and-invert.hello-btn-hover-glow:is(:hover, :active, :focus):not(:disabled) {
        box-shadow: 0 0 3px 3px rgba(128, 128, 128, 0.7);
    }

    .hello-btn-black-and-static.hello-btn-hover-glow:is(:hover, :active, :focus):not(:disabled) {
        box-shadow: 0 0 3px 3px rgba(128, 128, 128, 0.7);
    }

    .hello-btn-white-and-static.hello-btn-hover-glow:is(:hover, :active, :focus):not(:disabled) {
        box-shadow: 0 0 3px 3px rgba(128, 128, 128, 0.7);
    }
}

/* GLOW */

/* STATIC POP */
@media (prefers-color-scheme: dark) {
    .hello-btn-black-and-static:is(:hover, :active, :focus):not(:disabled) {
        box-shadow: 0 0 0 3px rgb(88, 88, 88);
    }

    .hello-btn-white-and-static:is(:hover, :active, :focus):not(:disabled) {
        box-shadow: 0 0 0 2px rgb(212, 212, 212);
    }
}

@media (prefers-color-scheme: light) {
    .hello-btn-black-and-static:is(:hover, :active, :focus):not(:disabled) {
        box-shadow: 0 0 0 2px rgb(48, 48, 48);
    }

    .hello-btn-white-and-static:is(:hover, :active, :focus):not(:disabled) {
        box-shadow: 0 0 0 2px rgb(48, 48, 48);
    }
}

/* STATIC POP */

/* LIGHT POP */
.hello-btn-black-on-light:is(:hover, :active, :focus):not(:disabled) {
    box-shadow: 0 0 0 2px rgb(48, 48, 48);
}

.hello-btn-white-on-light:is(:hover, :active, :focus):not(:disabled) {
    box-shadow: 0 0 0 2px rgb(48, 48, 48);
}

/* LIGHT POP */

/* DARK POP */
.hello-btn-black-on-dark:is(:hover, :active, :focus):not(:disabled) {
    box-shadow: 0 0 0 3px rgb(88, 88, 88);
}

.hello-btn-white-on-dark:is(:hover, :active, :focus):not(:disabled) {
    box-shadow: 0 0 0 2px rgb(212, 212, 212);
}

/* DARK POP */

/* FLARE */
.hello-btn-hover-flare {
    position: relative;
    z-index: 0;
}

.hello-btn-black-on-dark.hello-btn-hover-flare:is(:hover, :active, :focus):not(:disabled) {
    box-shadow: 0 0 0 3px rgb(88, 88, 88);
}

.hello-btn-white-on-dark.hello-btn-hover-flare:is(:hover, :active, :focus):not(:disabled) {
    box-shadow: 0 0 0 2px rgb(212, 212, 212);
}

.hello-btn-black-on-light.hello-btn-hover-flare:is(:hover, :active, :focus):not(:disabled) {
    box-shadow: 0 0 0 1px rgb(48, 48, 48);
}

.hello-btn-white-on-light.hello-btn-hover-flare:is(:hover, :active, :focus):not(:disabled) {
    box-shadow: 0 0 0 1px rgb(48, 48, 48);
}

@media (prefers-color-scheme: dark) {
    .hello-btn-black-and-invert.hello-btn-hover-flare:is(:hover, :active, :focus):not(:disabled) {
        box-shadow: 0 0 0 1px rgb(212, 212, 212);
    }

    .hello-btn-black-and-static.hello-btn-hover-flare:is(:hover, :active, :focus):not(:disabled) {
        box-shadow: 0 0 0 2px rgb(88, 88, 88);
    }

    .hello-btn-white-and-invert.hello-btn-hover-flare:is(:hover, :active, :focus):not(:disabled) {
        box-shadow: 0 0 0 1px rgb(88, 88, 88);
    }

    .hello-btn-white-and-static.hello-btn-hover-flare:is(:hover, :active, :focus):not(:disabled) {
        box-shadow: 0 0 0 1px rgb(212, 212, 212);
    }
}

@media (prefers-color-scheme: light) {
    .hello-btn-black-and-invert.hello-btn-hover-flare:is(:hover, :active, :focus):not(:disabled) {
        box-shadow: 0 0 0 1px rgb(48, 48, 48);
    }

    .hello-btn-black-and-static.hello-btn-hover-flare:is(:hover, :active, :focus):not(:disabled) {
        box-shadow: 0 0 0 1px rgb(48, 48, 48);
    }

    .hello-btn-white-and-invert.hello-btn-hover-flare:is(:hover, :active, :focus):not(:disabled) {
        box-shadow: 0 0 0 1px rgb(48, 48, 48);
    }

    .hello-btn-white-and-static.hello-btn-hover-flare:is(:hover, :active, :focus):not(:disabled) {
        box-shadow: 0 0 0 1px rgb(48, 48, 48);
    }
}

.hello-btn-hover-flare:before {
    content: "";
    background: linear-gradient(45deg, #ff0000, #ff7300, #fffb00, #48ff00, #00ffd5, #002bff, #7a00ff, #ff00c8, #ff0000);
    position: absolute;
    top: -2px;
    left: -2px;
    background-size: 400%;
    z-index: -1;
    filter: blur(5px);
    width: calc(100% + 4px);
    height: calc(100% + 4px);
    animation: flare-animation 20s linear infinite;
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
    border-radius: 0.4rem;
}

.hello-btn-hover-flare:is(:hover, :active, :focus):not(:disabled):before {
    opacity: 1;
}

.hello-btn-hover-flare-dark:after {
    z-index: -1;
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    background: #303030;
    left: 0;
    top: 0;
    border-radius: 0.4rem;
}

.hello-btn-hover-flare:after {
    z-index: -1;
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    border-radius: 0.4rem;
}

.hello-btn-black-on-light:after {
    background: #303030;
}

.hello-btn-black-on-dark:after {
    background: #303030;
}

.hello-btn-white-on-light:after {
    background: white;
}

.hello-btn-white-on-dark:after {
    background: rgb(212, 212, 212);
}

@media (prefers-color-scheme: dark) {
    .hello-btn-black-and-invert:after {
        background: rgb(212, 212, 212);
    }

    .hello-btn-black-and-static:after {
        background: rgb(48, 48, 48);
    }

    .hello-btn-white-and-invert:after {
        background: rgb(48, 48, 48);
    }

    .hello-btn-white-and-static:after {
        background: rgb(212, 212, 212);
    }

    .hello-btn-black-and-static.hello-btn-loader::after {
        background-image: url("data:image/svg+xml,%3Csvg class='animate-spin' style='color: rgb(212,212,212);' xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24'%3E%3Cstyle%3E .animate-spin%7Banimation: spin 1s linear infinite;%7D @keyframes spin %7B from %7B transform: rotate(0deg); %7D to %7B transform: rotate(360deg); %7D %7D %3C/style%3E%3Ccircle style='opacity: 0.25' cx='12' cy='12' r='10' stroke='currentColor' stroke-width='4'%3E%3C/circle%3E%3Cpath class='opacity-75' fill='currentColor' d='M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z'%3E%3C/path%3E%3C/svg%3E");
    }
}

@media (prefers-color-scheme: light) {
    .hello-btn-black-and-invert:after {
        background: rgb(48, 48, 48);
    }

    .hello-btn-black-and-static:after {
        background: rgb(48, 48, 48);
    }

    .hello-btn-white-and-static:after {
        background: white;
    }

    .hello-btn-white-and-invert:after {
        background: white;
    }

    .hello-btn-white-and-static.hello-btn-loader::after {
        background-image: url("data:image/svg+xml,%3Csvg class='animate-spin' style='color: rgb(48,48,48);' xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24'%3E%3Cstyle%3E .animate-spin%7Banimation: spin 1s linear infinite;%7D @keyframes spin %7B from %7B transform: rotate(0deg); %7D to %7B transform: rotate(360deg); %7D %7D %3C/style%3E%3Ccircle style='opacity: 0.25' cx='12' cy='12' r='10' stroke='currentColor' stroke-width='4'%3E%3C/circle%3E%3Cpath class='opacity-75' fill='currentColor' d='M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z'%3E%3C/path%3E%3C/svg%3E");
    }

    .hello-btn-black-and-invert.hello-btn-loader::after {
        background-image: url("data:image/svg+xml,%3Csvg class='animate-spin' style='color: rgb(255,255,255);' xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24'%3E%3Cstyle%3E .animate-spin%7Banimation: spin 1s linear infinite;%7D @keyframes spin %7B from %7B transform: rotate(0deg); %7D to %7B transform: rotate(360deg); %7D %7D %3C/style%3E%3Ccircle style='opacity: 0.25' cx='12' cy='12' r='10' stroke='currentColor' stroke-width='4'%3E%3C/circle%3E%3Cpath class='opacity-75' fill='currentColor' d='M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z'%3E%3C/path%3E%3C/svg%3E");
    }
}

@keyframes flare-animation {
    0% {
        background-position: 0 0;
    }

    50% {
        background-position: 400% 0;
    }

    100% {
        background-position: 0 0;
    }
}

/* FLARE */

/* HOVER NONE */
.hello-btn-black-on-dark.hello-btn-hover-none:is(:hover, :active, :focus):not(:disabled) {
    box-shadow: 0 0 0 2px rgb(88, 88, 88);
}

.hello-btn-white-on-dark.hello-btn-hover-none:is(:hover, :active, :focus):not(:disabled) {
    box-shadow: 0 0 0 1px rgb(212, 212, 212);
}

.hello-btn-black-on-light.hello-btn-hover-none:is(:hover, :active, :focus):not(:disabled) {
    box-shadow: 0 0 0 1px rgb(48, 48, 48);
}

.hello-btn-white-on-light.hello-btn-hover-none:is(:hover, :active, :focus):not(:disabled) {
    box-shadow: 0 0 0 1px rgb(48, 48, 48);
}

@media (prefers-color-scheme: dark) {
    .hello-btn-black-and-invert.hello-btn-hover-none:is(:hover, :active, :focus):not(:disabled) {
        box-shadow: 0 0 0 1px rgb(212, 212, 212);
    }

    .hello-btn-white-and-invert.hello-btn-hover-none:is(:hover, :active, :focus):not(:disabled) {
        box-shadow: 0 0 0 2px rgb(88, 88, 88);
    }

    .hello-btn-white-and-static.hello-btn-hover-none:is(:hover, :active, :focus):not(:disabled) {
        box-shadow: 0 0 0 1px rgb(212, 212, 212);
    }
}

@media (prefers-color-scheme: light) {
    .hello-btn-black-and-invert.hello-btn-hover-none:is(:hover, :active, :focus):not(:disabled) {
        box-shadow: 0 0 0 1px rgb(48, 48, 48);
    }

    .hello-btn-black-and-static.hello-btn-hover-none:is(:hover, :active, :focus):not(:disabled) {
        box-shadow: 0 0 0 1px rgb(48, 48, 48);
    }

    .hello-btn-black-and-static.hello-btn-hover-none:is(:hover, :active, :focus):not(:disabled) {
        box-shadow: 0 0 0 1px rgb(88, 88, 88);
    }

    .hello-btn-white-and-invert.hello-btn-hover-none:is(:hover, :active, :focus):not(:disabled) {
        box-shadow: 0 0 0 1px rgb(48, 48, 48);
    }

    .hello-btn-white-and-static.hello-btn-hover-none:is(:hover, :active, :focus):not(:disabled) {
        box-shadow: 0 0 0 1px rgb(48, 48, 48);
    }
}
/* HOVER NONE */