<template>
    <div>
        <div class="p-2 border border-primary-subtle bg-white mb-2">
            <strong><T>supportBanners.gaza.header</T></strong>
            <br class="d-md-none">
            <T>supportBanners.gaza.link</T>
        </div>
        <div class="p-2 border border-primary-subtle bg-white mb-2">
            <strong><T>supportBanners.ukraine.header</T></strong>
            <br class="d-md-none">
            <T>supportBanners.ukraine.link</T>
        </div>
    </div>
</template>

<style lang="scss">
@import "assets/variables";

$ukraine-blue: #025abc;
$ukraine-golden: #fed602;

.border-ukraine {
    //border-top: 3px solid linear-gradient(90deg, $ukraine-blue 40%, $ukraine-golden 60%);
    //background-color: $ukraine-blue;
    //background: linear-gradient(90deg, $ukraine-blue 40%, $ukraine-golden 60%);
    //color: $white;
    //text-shadow: 2px 2px 2px rgba($black, .5);

    border: 1px solid $border-color;
    // border-top: 5px solid;
    border-image-slice: 1;
    border-image-source: linear-gradient(90deg, $ukraine-blue 40%, $ukraine-golden 60%);

    a {
        //color: $white;
        text-decoration: underline;
    }
}

body[data-theme="dark"] .border-ukraine a {
    color: $white;
    text-decoration: underline;
}
</style>
