.yith-plugin-upgrade-licence-banner {
    display: flex;
    flex-direction: row;
    gap: 24px;
    align-items: center;

    .yith-plugin-upgrade-licence-banner__icon {
        color: #D02323;

        svg {
            width: 100%;
        }
    }

    .yith-plugin-upgrade-licence-banner__content {
        flex: 1;
        display: flex;
        flex-direction: column;
        gap: 6px;
    }

    .yith-plugin-upgrade-licence-banner__content__head {
        color: #982A21;
        font-size: 1rem;
        line-height: 1.5;
        font-weight: 600;
    }

    .yith-plugin-upgrade-licence-banner__content__message {
        mark {
            background: transparent;
            color: #D02323;
            font-weight: 600;
        }
    }

    .yith-plugin-upgrade-licence-banner__actions {
        display: flex;
        flex-direction: column;
        gap: 8px;
        margin-left: auto;

        & > a.yith-plugin-fw__button {
            padding: 0 32px;
            text-align: center;
        }
    }


    &.yith-plugin-upgrade-licence-banner--inline {
        margin: 30px 24px 16px 0;
        box-shadow: 1px 2px 8px 0 rgba(199, 0, 0, .1);
        background: #fff;
        padding: 24px;
        max-width: 2175px;
        box-sizing: border-box;

        .yith-plugin-upgrade-licence-banner__icon {
            flex: 40px 0;
        }


        .yith-plugin-upgrade-licence-banner--hide-inline {
            display: none;
        }

        @media screen and (max-width: 782px) {
            flex-direction: column;
            text-align: center;
            margin-right: 10px;
            gap: 8px;

            .yith-plugin-upgrade-licence-banner__icon {
                display: flex;
                align-items: center;
                justify-content: center;

                svg {
                    max-width: 40px;
                }
            }

            .yith-plugin-upgrade-licence-banner__actions {
                width: 100%;

                & > a.yith-plugin-fw__button {
                    padding: 8px;
                    text-align: center;
                }
            }
        }
    }

    &.yith-plugin-upgrade-licence-banner--modal {
        display: none;
        flex-direction: column;
        text-align: center;

        .yith-plugin-upgrade-licence-banner__icon {
            display: flex;
            align-items: center;
            justify-content: center;

            svg {
                max-width: 50px;
            }
        }

        .yith-plugin-upgrade-licence-banner__content {
            gap: 24px;
        }

        .yith-plugin-upgrade-licence-banner__content__head {
            color: #2C669B;
        }

        .yith-plugin-upgrade-licence-banner__actions {
            width: 100%;

            & > a.yith-plugin-fw__button {
                padding: 12px;
                text-align: center;
            }
        }

        .yith-plugin-upgrade-licence-banner--hide-modal {
            display: none;
        }
    }
}

.yith-plugin-upgrade-licence-modal {
    .yith-plugin-upgrade-licence-banner.yith-plugin-upgrade-licence-banner--modal {
        display: flex;
    }
}

.yith-plugin-fw-panel--version-1 {
    .yith-plugin-upgrade-licence-banner.yith-plugin-upgrade-licence-banner--inline {
        margin-right: 35px;
        box-sizing: border-box;
        width: calc(100% - 35px);
    }
}