/* ------------------------------------------------------------------------------------------------------------------------------ */
/* This file contains all styles for reusable components from the content_blocks app, compiled here to avoid repetition. */
/* Components -- search the name of the block in ALL CAPS to jump to a component (i.e. ICONS BLOCK) They are organized alphabetically. */
/* ------------------------------------------------------------------------------------------------------------------------------ */


/* ----- */
/* _ANCHOR TAGS */
/* ----- */

.card a:not(.btn):not(.icon), 
.alert a:not(.btn):not(.icon) {
    text-decoration: underline;
}

/* ----- */
/* _ALERTS */
/* ----- */

.alert-popup {
    position: fixed;
    bottom: 0;
    z-index: 20;
    margin-bottom: 0;
    transition: 0.6s all;
}

.alert-popup.fade:not(.show) {
    pointer-events: none;
}

/* ----- */
/* _MODALS */
/* ----- */

.modal {
    overflow-y: scroll !important;
}

body.modal-open,
html:has(> .modal-open) {
    overflow: hidden;
    overflow-y: hidden;
    overflow-x: hidden;
}

/* ----- */
/* PINWHEEL BACKDROP */
/* ----- */

.pinwheel-bg {
    background-image: url("/static/images/pinwheel.svg");
    background-repeat: no-repeat;
    position: absolute;
    top: -1rem;
    height: 120%;
    aspect-ratio: 1/1;
    opacity: 0.2;
    z-index: 5;
    filter: drop-shadow(2px 2px 5px black);
    max-height: 80rem;
}

.pinwheel-bg-right {
    right: 0;
    transform: translateX(20%);
}

.pinwheel-bg-left {
    left: 0;
    transform: translateX(-20%);
}

.pinwheel-bg-light {
    opacity: 0.1;
    filter: drop-shadow(2px 2px 5px black) grayscale(0.2);
}

/* ----- */
/* PINWHEEL FRAME */
/* ----- */


.pinwheel-frame {
    aspect-ratio: 10/9;
}

.pinwheel-frame {

    img,
    .img-border,
    .img-outline {
        width: 100%;
        height: 100%;
        mask-image: url('/static/images/pinwheel_black.webp');
        object-fit: cover;
        mask-repeat: no-repeat;
        mask-size: 100% 100%;
    }

    .img-outline,
    .img-border {
        position: absolute;
        opacity: 0.4;
    }

    .img-border {
        right: 0px;
        top: -4px;
        transform: scale(1.03);
        background-color: var(--federal-blue-600);
    }

    .img-outline {
        left: -2px;
        bottom: -1px;
        background-color: var(--federal-blue-200);
    }

    @media (min-width: 992px) {
        .img-border {
            right: -15px;
            top: -4px;
        }
    }
}


/* ----- */
/* TOGGLE CIRCLE */
/* ----- */

.toggle-circle-inner {
    background: linear-gradient(to right, var(--light-blue), var(--federal-blue));
}

.toggle-circle {
    width: 3rem;
    height: 3rem;
    border-radius: 100%;
    position: relative;
    margin: 2px;
    display: inline-block;
    vertical-align: middle;
}


.toggle-circle::before,
.toggle-circle::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

.toggle-circle.plus::before {
    width: 2px;
    margin: 3px auto;
    background: var(--navy);
    box-shadow: 1px 1px 1px #00000033;
}

.toggle-circle.plus::after,
.toggle-circle.minus::after {
    margin: auto 3px;
    height: 2px;
    box-shadow: none;
    background: var(--navy);
    box-shadow: 1px 1px 1px #00000033;
}


.toggle-circle:hover {
    background-color: transparent !important;
    color: white
}

.toggle-circle:hover::before,
.toggle-circle:hover::after {
    background: white;
}

.toggle-circle.minus:hover::before {
    background: transparent;
}