@use 'ngx-tethys/styles/variables.scss';
@use '../../styles/variables.scss' as theVariables;
@use '../../styles/mixins.scss' as mixins;

.the-toolbar-container {
    position: relative;
    z-index: 3;
    box-sizing: border-box;
    padding: theVariables.$nav-item-margin;
    background-color: variables.$gray-80;
    border: none;
    border-bottom: 1px solid variables.$gray-100;

    .head-type-dropdown {
        width: 70px;

        .dropdown-menu-item:not(:first-child) {
            padding-top: 0;
            padding-bottom: 0;

            .name {
                display: block;
                margin: auto 0;
                color: variables.$gray-800;
                font-weight: bold;
                line-height: 100%;
            }
        }
    }

    .the-toolbar-item {
        @include mixins.the-toolbar-disabled();
    }

    @include mixins.the-action-disabled();
    @include mixins.the-toolbar-active();
}
.the-global-toolbar {
    .the-toolbar-item,
    .the-toolbar-dropdown-container,
    .thy-action {
        &:not(:hover):not(.active):not(.thy-popover-origin-active):not(.thy-default-picker-active) {
            color: variables.$gray-700;
        }
    }
    @include mixins.the-toolbar-divider-spacing();
}
.the-toolbar-disabled {
    pointer-events: none;
}