#loader{
    &[data-state=hidden]{
        display: none;
    }
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: fixed;
    top:0;
    left:0;
    width:100vw;
    height:100vh;
    z-index: 99;
    --dim: 3rem;
    #spinners{
        display: flex;
        margin-bottom: 2rem;
        div{
            border-radius: 50%;
            width:var(--dim);
            height:var(--dim);
            border-top: calc(var(--dim) / 20) solid #44e5ff;
            animation: loader 2.5s linear 0s infinite forwards;
            position: relative;
            margin: 0 2rem;
            &::before{
                content: '';
                position: absolute;
                top:25%;
                right:-10%;
                background: #44e5ff;
                width: calc(var(--dim) / 5);
                height: calc(var(--dim) / 5);
                border-radius: 50%;
                z-index: 2;
                box-shadow: 
                0px 0px 8px 8px #44e5ff99,
                0px 0px 12px 3px #44e5ff77,
                0px 0px 15px 1px #44e5ff44;
            }
            &:nth-of-type(2){
                animation-name: loader2;
                border-left: calc(var(--dim) / 20) solid #ff44e8;
                border-top: none;
                &::before{
                    top:90%;
                    right:50%;
                    background: #ff44e8;
                    box-shadow: 
                    0px 0px 8px 8px #ff44e899,
                    0px 0px 12px 3px #ff44e877,
                    0px 0px 15px 1px #ff44e844;
                }
            }
            &:nth-of-type(3){
                animation-name: loader;
                border-top-color: #f3ff44;
                &::before{
                    top:25%;
                    right:-10%;
                    background: #f3ff44;
                    box-shadow: 
                    0px 0px 8px 8px #f3ff4499,
                    0px 0px 12px 3px #f3ff4477,
                    0px 0px 15px 1px #f3ff4444;
                }
            }
        }
    }
    p{
        text-align: center;
        max-width: 90%;
    }
    #mainText{
        font-size: 1.25rem;
        color: var(--text_colour);
        margin-bottom: 1rem;
    }
    button{
        &[data-state=hidden]{
            display: none;
        }
        margin-top: 2rem;
    }
    .warning{
        &[data-state=hidden]{
            display: none;
        }
    }
}

@keyframes loader {
    0%{
        transform: rotate(0deg)
    }
    100%{
        transform: rotate(360deg);
    }
}

@keyframes loader2 {
    0%{
        transform: rotate(360deg)
    }
    100%{
        transform: rotate(0deg);
    }
}

.spinner{
    --_size: 3rem;
    display: grid;
    place-items: center;
}

.spinner .spinner_container{
    height: var(--_size);
    width: var(--_size);
    position: relative;
    animation: spin 5s linear infinite;
    transform-origin: 50% 50%;
}
.spinner .spine{
    display: block;
    height: var(--_size);
    width: 2px;
    background: linear-gradient(0deg, var(--blue-300), var(--orange-300));
    position: absolute;
    border-radius: 4px;
    top: 0%;
    left: 50%;
    transform-origin: 50% 50%;
    animation: flex 5s ease-in-out infinite;
}
.spinner .spine:nth-of-type(2){
    rotate: 45deg;
    background: linear-gradient(0deg, var(--pink-300), var(--red-300));
    animation-delay: 1s;
}
.spinner .spine:nth-of-type(3){
    rotate: 90deg;
    background: linear-gradient(0deg, var(--blue-300), var(--green-300));
    animation-delay: 2s;
}
.spinner .spine:nth-of-type(4){
    rotate: -45deg;
    background: linear-gradient(0deg, var(--blue-100), var(--yellow-100));
    animation-delay: 3s;
}

@keyframes spin {
    100%{
        transform: rotate(-360deg);
    }
}

.dialog{
    --br: 4px;
    --borderColour: var(--grey-500);
    &[data-state=hidden]{
        display: none;
    }
    background: var(--blue-1300);
    border-radius: var(--br);
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -80%);
    z-index: 96;
    width: 550px;
    max-width: 96%;
    max-height: 96%;
    overflow-y: auto;
    &[data-size=large]{
        width: 650px;
    }
    .titleBar{
        border: 1px solid var(--borderColour);
        border-radius: var(--br) var(--br) 0 0;
        padding: 1rem;
        p{
            font-size: 1.15rem;
            color: var(--blue-100);
            text-align: center;
            font-weight: bold;
        }
        
    }
    .information{
        border: 1px solid var(--borderColour);
        padding: 2rem 1rem;
        p{
            margin: 0;
        }
        div + div{
            margin-top: 0.25rem;
        }
        .subTitle{
            font-size: 1.05rem;
            margin: 1rem 0 0.25rem 0;
            color: var(--blue-200);
            font-weight: bold;
        }
        .list{
            margin: 0.5rem;
        }
        .powerRanking{
            justify-content: center;
            margin-bottom: 0.5rem;
            img{
                max-width: 15px;
            }
        }
    }
    .buttons{
        border: 1px solid var(--borderColour);
        justify-content: center;
        button, a{
            flex: 1;
        }
    }
}

.overlay{
    &[data-state=hidden]{
        display: none;
    }
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100%;
    background: #000000ee;
    z-index: 95;
}

.waitSpinner{
    &[data-state=hidden]{
        display: none;
    }
    display: grid;
    grid-template-rows: 2fr 1fr;
    gap: 1rem;
    padding: 1rem;
    justify-items: center;
    .container{
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    p{
        margin-top: 0.5rem;
        text-align: center;
        font-weight: bold;
    }
    span{
        --aniTime: 1s;
        --colour: red;
        height: 20px;
        width: 3px;
        background: var(--colour);
        display: inline-block;
        position: absolute;
        transform: translate(-1px, -5px);
        animation: waitSpin var(--aniTime) ease-in-out 0s infinite forwards;
        transform-origin: 0% 100%;
    }
}

@keyframes waitSpin{
    to{
        rotate: 360deg;
    }
}

.switchSection{
    display: grid;
    place-items: center;
}

.switchRow{
    display: flex;
    gap: 1rem;
    padding: 0.25rem 1rem;
    input{
        display: none;
    }
    label{
        --size: 16px;
        --offset: 0.65;
        width: var(--size);
        height: var(--size);
        display: block;
        background-color: var(--grey-100);
        border-radius: 50%;
        position: relative;
        &::after{
            content: '';
            position: absolute;
            top: 50%;
            left: 50%;
            width: calc(var(--size) * var(--offset));
            height: calc(var(--size) * var(--offset));
            background: radial-gradient(circle, var(--black) 0%, var(--purple-300) 50%, var(--black) 100%);
            border-radius: inherit;
            transform: translate(-50%, -50%) scale(0);
            transition: transform 0.25s;
        }
        &[data-state=on]{
            &::after{
                transform: translate(-50%, -50%) scale(1);
            }
        }
    }
}

.searchable{
    &[data-search=hidden]{
        display: none;
    }
}

.searchBar{
    container-type: inline-size;
    container-name: searchbar;
    align-items: center;
    margin-left: auto;
    max-width: 500px;
    width: 100%;
    position: relative;
    input{
        width: 100%;
    }
    button{
        --size: 22px;
        position: absolute;
        top: 50%;
        right: 0;
        min-width: unset;
        transform: translate(-40%, -50%);
        font-size: 0.8rem;
        padding: 0.25rem;
        width: var(--size);
        height: var(--size);
        border-radius: 50%;
    }
}