@use '../../assets/styles/index' as *;

.root {
    --uui-notification-card-bg: var(--uui-surface);
    --uui-notification-card-border: var(--uui-color-50);
    --uui-notification-card-fill: var(--uui-color-50);
    --uui-notification-card-text: var(--uui-text-primary);

    --uui-notification-card-border-radius: var(--uui-border-radius);
    --uui-notification-card-border-width: 0;
    --uui-notification-card-border-top-width: 6px;
    --uui-notification-card-shadow: var(--uui-shadow-level-2); //TODO: may change in the future
    //
    border-style: solid;
    border-color: var(--uui-notification-card-border, transparent);
    border-width: var(--uui-notification-card-border-width);
    border-top-width: var(--uui-notification-card-border-top-width);
    padding: 6px 18px;
    width: 360px;
    background: var(--uui-notification-card-bg, var(--uui-surface));
    display: flex;
    overflow: hidden;
    border-radius: var(--uui-notification-card-border-radius);
    box-shadow: var(--uui-notification-card-shadow);

    @media (max-width: 720px) {
        width: 100%;
    }

    .icon-wrapper {
        padding: 6px 0;
    }

    .action-wrapper {
        display: flex;
    }

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

    .close-icon {
        padding: 6px 0;
    }

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

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

    .clear-button {
        justify-content: center;
        align-items: center;
        height: 48px;
        padding: 0 18px;
    }

    .close-wrapper {
        display: flex;
        align-items: flex-start;
    }

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