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

:host {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: $spacing-3;
    height: 100%;
    padding: $spacing-3;

    &.disabled {
        opacity: 1; // Override the global disabled opacity
        pointer-events: none;
    }
}

.icon-container {
    border-radius: 50%;
    padding: $spacing-3;

    .icon {
        font-size: $font-size-xxl;
        width: auto;
    }

    &.info {
        color: $color-palette-primary-500;
        background: $color-palette-primary-200;
    }

    &.error {
        color: $color-alert-yellow;
        background: $color-alert-yellow-light;
    }

    &.disabled {
        color: $field-disabled-color;
        background: $field-disabled-bgcolor;

        .icon {
            color: $field-disabled-color;
        }
    }
}

.text {
    text-align: center;
    line-height: 140%;
    font-size: $font-size-default;

    &.disabled {
        color: $field-disabled-color;
    }
}
