.root {
    --uui-alert-text: var(--uui-text-primary);
    --uui-alert-bg: var(--uui-color-10);
    --uui-alert-border: var(--uui-color-50);
    --uui-alert-icon: var(--uui-color-50);

    --uui-alert-border-radius: 3px;
    //
    background-color: var(--uui-alert-bg);
    border-left: 6px solid var(--uui-alert-border);

    .icon-wrapper {
        :global(.uui-icon) {
            fill: var(--uui-alert-icon);
        }
    }
}

.alert-wrapper {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    overflow: hidden;
    min-width: 170px;
    border-radius: var(--uui-alert-border-radius);
}

.size-48 {
    padding: 9px 18px 9px 12px;
    min-height: 48px;
}

.size-36 {
    padding: 3px 9px;
    min-height: 36px;
    border-left-width: 3px;
}

.icon-wrapper {
    height: 100%;
    margin-right: 12px;
}

.action-wrapper {
    display: flex;
    align-items: center;
}

.action-icon {
    min-height: 30px;
}

.action-link:not(:last-child) {
    margin-right: 12px;
}

.close-icon {
    margin-left: 17px;
    min-height: 30px;
    min-width: fit-content;
    align-self: flex-start;
}

.main-path {
    width: 100%;
    display: flex;
}

.content {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    width: 100%;
}
