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

.root {
    --uui-notification_card-bg: var(--uui-surface-main);
    --uui-notification_card-border: var(--uui-color-50);
    --uui-notification_card-fill: var(--uui-color-50);
    --uui-notification_card-shadow: var(--uui-shadow-level-2); //TODO: may change in the future

    --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-padding: 6px 18px;
    --uui-notification_card-width: 360px;
    --uui-notification_card-icon-size: 24px;
    --uui-notification_card-icon-padding: 6px 0;
    --uui-notification_card-close_icon-padding: 6px 0;
    --uui-notification_card-actions-gap: 12px;
    --uui-notification_card-content-margin: 0 12px;
    --uui-notification_card-content-gap: 12px;
    //
    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: var(--uui-notification_card-padding);
    width: var(--uui-notification_card-width);
    background: var(--uui-notification_card-bg, var(--uui-surface-main));
    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: var(--uui-notification_card-icon-padding);
    }

    .action-wrapper {
        display: flex;
        align-items: center;
        column-gap: var(--uui-notification_card-actions-gap);
    }

    .close-icon {
        padding: var(--uui-notification_card-close_icon-padding);

        :global(.uui-icon) {
            svg {
                height: var(--uui-notification_card-icon-size);
                width: inherit;
            }
        }
    }

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

    .content {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        width: 100%;
        margin: var(--uui-notification_card-content-margin);
        column-gap: var(--uui-notification_card-content-gap);
    }

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

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

.clear-notifications {
    --uui-clear-notifications-height: 48px;
    --uui-clear-notifications-padding: 0 18px;
    --uui-clear-notifications-width: 360px;
    --uui-clear-notifications-border-radius: 3px;
    //
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    height: var(--uui-clear-notifications-height);
    padding: var(--uui-clear-notifications-padding);
    width: var(--uui-clear-notifications-width);
    border-radius: var(--uui-clear-notifications-border-radius);
    background: var(--uui-surface-main);
    box-shadow: var(--uui-shadow-level-2);
}

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