// SPDX-License-Identifier: MIT
// Copyright (c) 2020-2022 The Pybricks Authors

// Custom styling for the Toolbar control.

@use '@blueprintjs/core/lib/scss/variables' as bp;
@use '../variables' as pb;

.pb-toolbar {
    padding: bp.$pt-grid-size bp.$pt-grid-size * 1.5;
    z-index: bp.$pt-z-index-content;

    // make small buttons more square and slightly smaller (some of this is
    // done in react)
    @media screen and (max-width: pb.$narrow-screen-limit) {
        .#{bp.$ns}-button {
            padding: 5px;
        }
    }
}

.pb-toolbar * {
    box-shadow: unset !important;
}

.pb-toolbar-group {
    align-items: center;

    &.pb-align-left {
        float: left;
        margin-right: bp.$pt-grid-size * 2;
    }

    &.pb-align-right {
        float: right;
        margin-left: bp.$pt-grid-size * 2;
    }
}