@use '../variables' as *;

window.quick_settings {
    color: $fg-color;
    font-weight: bold;

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

    button {
        padding: 0.75rem 1rem;
    }
}

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

    .device {
        padding: 1rem 3rem;
    }

    button {
        padding: 0.75rem 0.5rem;
    }
}

window.quick_settings button, window.qs_bluetooth button {
    background: $bg-color;
    border: 2px solid $fg-color;
    margin: 5px;

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

    &:hover {
        background: $fg-color;

        * {
            color: $bg-color;
        }
    }

    &.active {
        background: $fg-color;
        border: 0.5px solid $bg-color;

        * {
            color: $bg-color;
        }
    }
}