@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: $background;
        padding: 0.75rem 3rem;
        margin: 0;

        * { color: $foreground; }
    }

    button {
        padding: 0.75rem 1rem;
    }
}

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

    .device {
        padding: 1rem 3rem;
    }

    button {
        padding: 0.75rem 0.5rem;
    }
}

window.quick_settings button, window.qs_bluetooth button {
    background: $background;
    border: 2px solid $foreground;
    margin: 5px;

    transition: 400ms cubic-bezier(0.05, 0.7, 0.1, 1);

    &:hover {
        background: $foreground;

        * {
            color: $background;
        }
    }

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

        * {
            color: $background;
        }
    }
}