@use "variables" as *;
@import "dotcms-theme/utils/theme-variables";

:host {
    align-items: center;
    border-right: solid 1px $color-palette-gray-200;
    display: flex;
    opacity: 0;
    padding-right: $spacing-4;
    transition: $basic-speed * 2;

    i,
    dot-spinner {
        margin-right: $spacing-1;
        align-self: center;
    }

    &.loading {
        .dot-global-message__text {
            color: $color-palette-primary;
        }
    }

    &.success {
        i {
            color: $color-accessible-text-green;
        }
    }

    &.warning {
        i {
            color: $color-alert-yellow;
        }
    }

    &.error {
        i {
            color: $color-accessible-text-red;
        }
    }
}

:host(.dot-global-message--visible) {
    opacity: 1;
}

.dot-global-message__text {
    color: $color-palette-gray-700;
}

.edit-page-variant-mode :host {
    .dot-global-message__text {
        color: $white;
    }

    &.loading {
        .dot-global-message__text {
            color: $white;
        }
    }

    &.success,
    &.warning,
    &.error {
        i {
            color: $white;
        }
    }
}
