@use '../theme_colors.scss' as *;

window.quick_settings {
    font-weight: bold;

    >box {
        border: 1px solid $base01;
        border-radius: 10px;
        margin: 8px;
    }
    
    >.inner {
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
        background: color-mix(in srgb, $base00, transparent 15%);
        padding: 0.75rem 3rem;
        margin: 0;

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

    button {
        padding: 0.75rem 1rem;
    }
}

window.qs_bluetooth {
    >.inner {
        background: color-mix(in srgb, $base00, transparent 15%);
        padding: 0.75rem 3rem;
        border-radius: 10px;
    
        * { color: $base0A; }
    }

    .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: $base00;
    border: 2px solid $base01;
    margin: 5px;

    &:hover {
        background: $base01;
    }

    &.active {
        background: $base0A;
        border: 0.5px solid $base00;

        * {
            color: $base01;
        }
    }
}