$fob-header: 20%;
$fob-menu: 25%;
$fob-body: 70%;
$fob-spacing: 5%;

.app-fob-lg {
    height: 16.25rem; //260px
    width: 100%;
    border-radius: 0.625rem; //10px
    border: 1px dashed rgba(var(--info), 1);
    background: rgba(var(--info), 0.1);
    position: relative;

    &:not(.active) {
        border-color: var(--bs-body-color);
        background: var(--bs-body-bg);
    }

    > div {
        transition: all 0.5s ease-in-out;
    }

    > :nth-child(1) {
        position: absolute;
        height: $fob-header;
        top: 0;
        right: 0;
        left: 0;
        border-radius: 0.625rem 0.625rem 0 0;
        background: rgba(var(--bs-body-color-rgb), 0.15);
        display: block;
    }

    > :nth-child(2) {
        width: $fob-menu;
        background: rgba(var(--bs-body-color-rgb), 0.15);
        left: 0;
        bottom: 0;
        top: calc($fob-header + $fob-spacing);
        position: absolute;
        border-radius: 0 0 0 0.625rem; //10px
    }

    > :nth-child(3) {
        background: repeating-linear-gradient(-55deg, rgba(var(--bs-body-color-rgb), 0.05), rgba(var(--bs-body-color-rgb), 0.05) 2px, rgba(var(--bs-body-color-rgb), 0) 2px, rgba(var(--bs-body-color-rgb), 0) 6px);
        background-color: rgba(var(--bs-body-color-rgb), 0.15);;
        width: $fob-body;
        top: calc($fob-header + $fob-spacing);
        right: 0;
        bottom: 0;
        position: absolute;
    }

    // Specific states
    &[data-class^=set-header-fixed] {
        > :nth-child(1) {
            background: #F68BEC;
        }
    }

    &[data-class^=set-nav-full] {
        > :nth-child(1) {
            left: 35%;
            border-radius: 0 0.625rem 0 0;
        }

        > :nth-child(2) {
            border-radius: 0.625rem 0 0 0.625rem; //10px
            top: 5%;
        }
    }

    &[data-class^=set-nav-fixed] {
        > :nth-child(2) {
            background: #F68BEC;
        }
    }

    &[data-class^=set-nav-collapse] {
        > :nth-child(1) {
            background: rgba(0, 0, 0, 0.1);
        }

        > :nth-child(2) {
            top: 14%;
            height: auto;
            bottom: 14%;
            z-index: 1;
            border-radius: 0 0.625rem 0.625rem 0;
            width: 7%;
            background: rgba(var(--warning), 0.6);
        }

        > :nth-child(3) {
            width: auto;
            left: 5%;
            border-radius: 0 0 0.625rem 0.625rem;
        }
    }

    &[data-class^=set-nav-minified] {
        > :nth-child(2) {
            width: 13%;
        }

        > :nth-child(3) {
            width: 73%;
        }
    }
}


.app-fob-showcase {
    overflow: hidden;
    border: none;
}

.app-fob-showcase-text {
    margin-bottom: 2rem;

    position: relative;
    padding: 1.1rem 1rem 1rem;
    border: 1px dashed var(--bs-emphasis-color);
    border-radius: 0.625rem; //10px

    &:after {
        content: attr(data-prefix);
        position: absolute;
        padding: 0.3125rem; //5px
        border-radius: 0.3125rem; //5px
        background: var(--bs-body-color);
        top: -0.875rem; //14px
        right: 0.625rem; //10px
        color: var(--bs-body-bg);
        font-size: 0.8125rem; //13px
        line-height: 0.8125rem; //13px
    }

}

.app-themes {

    /* Hide the actual checkbox */
    .clickable-boxes input[type="radio"] {
        display: none;
    }

    .clickable-boxes {
        display: flex;
        flex-wrap: wrap;
        /* Allows items to wrap to the next line */
        justify-content: start;
        /* Aligns items at the start of each row */
        align-items: stretch;
        /* Stretch items vertically */
        align-content: flex-start;
        /* Align rows at the start */
        gap: 0.8125rem; //13px
        /* Adds consistent spacing between items */
        padding: 0.5rem 0;
    }

    .clickable-boxes label {
        flex: 1 1 calc(25% - 0.625rem); //10px
        /* Adjust flex to define 4 items per row */
        max-width: calc(25% - 0.625rem); //10px
        /* Set maximum width based on row layout */
        text-align: center;
        background-color: #ddd;
        color: #333;
        line-height: 4.04375rem; //64.75px
        height: 4.04375rem; //64.75px
        border-radius: 0.25rem;
        cursor: pointer;
        transition: background-color 0.3s, transform 0.2s;
        font-size: 0.825rem;
        position: relative;
        //border: 1px solid #fff;

        &::after {
            content: attr(data-prefix);
            position: absolute;
            padding: 0.25rem; //4px
            border-radius: 0.25rem; //4px
            background: #e9e9e9;
            bottom: 0.25rem; //4px
            left: 0.25rem; //4px
            color: #333;
            font-size: 0.66rem; //10px
            line-height: 0.66rem; //10px
        }
    }

    /* Ensure items stretch and look selected when checked */
    .clickable-boxes input[type="radio"]:checked+label {
        background-color: #4CAF50;
        color: white;
        transform: scale(1.05);
        outline: 3px solid #156be1;

        //box-shadow: inset 0 0 0 2px rgba(var(--primary), 1);
        //border: 1px solid rgba(var(--primary), 1);

        &::after {
            background: #333;
            color: #e9e9e9;
        }
    }

    .clickable-boxes input[type="radio"]+label:active {
        //box-shadow: inset 0 0 0 2px rgba(0, 0, 0, 0.25);
        //transform: scale(0.95);
    }

}

//Settings Fobcase
.set-header-fixed {
    .app-fob-showcase {
        :nth-child(1) {
            background-color: rgba(var(--danger), 0.9);
        }
    }
}

.set-nav-full:not(.set-header-fixed) {
    .app-fob-showcase {
        :nth-child(1) {
            left: calc($fob-menu + $fob-spacing);
            border-radius: 0 0.625rem 0 0;
        }

        :nth-child(2) {
            top: 0;
            border-radius: 0.625rem 0 0 0.625rem; //10px
        }
    }
}

.set-nav-full.set-nav-collapsed:not(.set-header-fixed) {
    .app-fob-showcase {
        :nth-child(1) {
            left: 0;
            border-radius: 0.625rem 0.625rem 0 0;
        }

        :nth-child(2) {
            top: 0;
            background-color: rgba(var(--warning), 0.9);
            border-radius: 0;
        }

        :nth-child(3) {
            left: 0;
            right: 0;
            width: auto;
        }
    }
}

.set-nav-full.set-nav-fixed:not(.set-header-fixed) {
    .app-fob-showcase {
        :nth-child(2) {
            background-color: rgba(var(--danger), 0.9);
        }
    }
}

.set-nav-fixed.set-header-fixed {
    .app-fob-showcase {
        :nth-child(2) {
            background-color: rgba(var(--danger), 0.9);
        }
    }
}

.set-nav-full.set-nav-fixed.set-header-fixed {
    .app-fob-showcase {
        :nth-child(1) {
            left: calc($fob-menu + $fob-spacing);
            border-radius: 0 0.625rem 0 0;
            background-color: rgba(var(--danger), 0.9);
        }

        :nth-child(2) {
            top: 0;
            background-color: rgba(var(--danger), 0.9);
            border-radius: 0.625rem 0 0 0.625rem; //10px
        }
    }
}

.set-header-fixed.set-nav-full.set-nav-fixed.set-nav-collapsed,
.set-header-fixed.set-nav-collapsed,
.set-nav-full.set-nav-collapsed {
    .app-fob-showcase {
        :nth-child(1) {
            left: 0;
        }

        :nth-child(2) {
            transform: translate3d(-90%, 0, 0);
            box-shadow: rgba(0, 0, 0, 0.1) 7px 0px 6px 2px;
            animation: widthAnimation 4s ease-in-out 2 alternate;
            z-index: 1;
        }

        :nth-child(3) {
            left: 0;
            right: 0;
            width: auto;
            border-radius: 0 0 0.625rem 0.625rem; //10px
        }
    }
}

.set-header-fixed.set-nav-collapsed {
    .app-fob-showcase {
        :nth-child(2) {
            background-color: rgba(var(--warning), 0.9);
        }
    }
}

@media only screen and ( max-width: #{($mobile-breakpoint-size) - 0.02px} ){

    .app-fob-showcase-text:after {
        content: "Mobile Preview";
    }


    .app-fob-lg > :nth-child(1) {
        &::before {
            content: "";
            position: absolute;
            top: calc(50% - 0.6rem);
            left: .5rem;
            width: 1.7rem;
            height: 1.2rem;
            background-color: rgba(var(--bs-body-color-rgb), 0.15);
            z-index: 1;
            display: block;
            border-radius: 0.25rem;
        }
    }

    .app-fob-lg > :nth-child(2) {
        display: none;
    }

    .app-fob-lg > :nth-child(3) {
        width: 100%;
    }

    .app-fob-showcase-text{
        width: 60% !important;
        margin: 0 auto 2rem;
    }
}

// .set-nav-top {
//     .app-fob {
//         background: #fff;
//         border-color: #333;
//     }

//     .app-fob-alt {
//         border-color: rgba(var(--info), 1);
//         background: rgba(var(--info), 0.2);
//     }
// }


// mod warning
.set-nav-fixed:not(.set-nav-full):not(.set-header-fixed) .primary-mod {
    //animation: warningFlash 3s ease-in-out 0s;
    border-color: rgba(var(--danger), 0.9);
    color: rgba(var(--danger), 0.9);

    &:after {
        content: "Select an option";
        color: var(--bs-white);
        background: rgba(var(--danger), 0.9);
    }
}


.mod-status {
    padding: 0.8rem 1rem 0.5rem;
    border: 1px dashed var(--bs-border-color);
    position: relative;
    border-radius: 0.5rem;
    margin-bottom: 2.5rem;

    //max-width: 12.5rem; //500px

    &:first-of-type {
        margin-top: 2rem;
    }

    &:after {
        content: attr(data-prefix);
        position: absolute;
        padding: 0.3125rem; //5px
        border-radius: 0.3125rem; //5px
        background: var(--bs-border-color);
        top: -0.875rem; //14px
        right: 0.625rem; //10px
        color: var(--bs-body-color);
        font-size: 0.8125rem; //13px
        line-height: 0.8125rem; //13px
    }

}

// button
.reset-button {
	opacity: 0.75;
    filter: grayscale(50%);
}

[class*="set-"],
[data-bs-theme="dark"],
.theme-active {
	/* style rules go here */
	.reset-button {
		opacity: 1;
		filter: grayscale(0%);
	}
}