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

@mixin the-toolbar-disabled {
    &.disabled {
        cursor: not-allowed;
        opacity: 0.25;

        .thy-action {
            pointer-events: none;
        }
    }
}

@mixin the-toolbar-active {
    .thy-action.thy-popover-origin-active,
    .thy-action.thy-default-picker-active,
    .the-toolbar-dropdown-container.thy-popover-origin-active .thy-action {
        color: variables.$primary;
        background: rgba(variables.$primary, 0.1);
        border-radius: 0.25rem;
        visibility: visible !important;
    }
}

@mixin the-toolbar-divider-spacing {
    .the-toolbar-item,
    .the-toolbar-dropdown-container {
        &:not(:last-child) {
            margin-right: theVariables.$thy-action-margin-right;
        }
    }

    .the-toolbar-item,
    .the-toolbar-dropdown-container {
        & + .thy-divider {
            margin-left: #{theVariables.$thy-action-margin-right} !important;
        }
    }
}

@mixin the-action-disabled {
    .thy-action {
        &.disabled {
            color: variables.$gray-400;
            cursor: not-allowed;

            &:hover {
                background: transparent;
                border-radius: unset;
            }
        }
    }
}

@mixin common-toolbar-icon-color {
    .thy-action:not(:hover):not(.active) {
        color: variables.$gray-700;
    }
}