@use '../colors' as *;

window.quick_settings {
    font-weight: bold;

    >box {
        border-radius: 10px;
        margin: 8px;
    }
    
    >.inner {
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
        background: $primary;
        padding: 0.75rem 3rem;
        margin: 0;

        * { 
            transition: all 0.2s ease-in-out;
            color: $onPrimary;
        }
    }

    button {
        padding: 0.75rem 1rem;
    }
}

window.qs_bluetooth {
    >.inner {
        background: $primary;
        padding: 0.75rem 3rem;
        border-radius: 10px;
    
        * { color: $onPrimary; }
    }

    .device {
        padding: 1rem 3rem;
    }

    button {
        padding: 0.75rem 0.5rem;
    }
}

window.quick_settings button, window.qs_bluetooth button {
    transition: all 0.2s ease-in-out;
    background: $primary;
    border: 2px solid $onPrimary;
    margin: 5px;

    &:hover {
        background: $onPrimary;

        * {
            color: $primary;
        }
    }

    &.active {
        background: $onPrimary;
        border: 0.5px solid $primary;

        * {
            color: $primary;
        }
    }
}