@use "sass:string";
@use './variables' as vars;

@mixin setBgImage($url, $width, $height) {
    @include setSizeImage($width,  $height);
    background-image: $url;
}

@mixin setSizeImage($width, $height) {
    background: transparent no-repeat 100% 100%;
    background-size: contain;
    width: $width;
    height: $height;
}

@mixin flexCol($gap: 10px, $justify-content: flex-start, $align-items: flex-start) {
    display: flex;
    flex-direction: column;
    gap: $gap;
    justify-content: $justify-content;
    align-items: $align-items;
}

@mixin flexRow($gap: 10px, $justify-content: flex-start, $align-items: center) {
    display: flex;
    flex-direction: row;
    gap: $gap;
    justify-content: $justify-content;
    align-items: $align-items;
}

@mixin font($size: 15px, $line-h: 20px, $weight: 500, $color: black) {
    font-weight: $weight;
    font-size: $size;
    line-height: $line-h;
    color: $color;
}

@mixin ellipsis {
    white-space: normal;
    overflow: hidden;
    max-width: 100%;
    text-overflow: ellipsis;
}

@mixin skeleton() {
    .loader, .skeleton-loader {
        @content;
    }
}

@mixin input() {
    border: 1px solid var(--trm-input-border-color);
    border-radius: 10px;
    width: 100%;
    box-sizing: border-box;

    min-height: 46px;
    padding: 12px 20px;
    @include font(14px, 20px, 500);
    @include tablet {
        min-height: 50px;
        padding: 13px 20px;
        @include font(15px, 22px, 500);
    }
    &:hover {
        border-color: var(--trm-input-border-color--hover);
    }

    &:focus, &:active {
        box-shadow: 0 0 0 2px var(--trm-input-border-color--focus);
        outline: none;
    }
    @content;
}

@mixin additional-flag-icon($country) {
    .fi-#{$country} {
        background-image: url(#{vars.$trm-tmpl-assets-base-url}/svg/flags/#{$country}.svg);
    }
}

// Breakpoints

$trm-bp-low-tablet-down: 481px;
$trm-bp-tablet-down: 768px;
$trm-bp-landscape-tablet-down: 900px;
$trm-bp-desktop-down: 1281px;
$trm-bp-large-desktop-down: 1921px;

@mixin tablet-low() {
    @media (min-width: $trm-bp-low-tablet-down) {
        @content;
    }
}

@mixin tablet() {
    @media (min-width: $trm-bp-tablet-down) {
        @content;
    }
}

@mixin tablet-large() {
    @media (min-width: $trm-bp-landscape-tablet-down) {
        @content;
    }
}

@mixin desktop() {
    @media (min-width: $trm-bp-desktop-down) {
        @content;
    }
}

@mixin desktop-large() {
    @media (min-width: $trm-bp-large-desktop-down) {
        @content;
    }
}

@mixin headerCard() {
    &__info {
        background: #F5F5F5;
        border-radius: 16px;
        padding: 20px 24px;
        @include flexCol(10px);

        &__name {
            margin: 0;
            @include font(16px, 20px, 500);
        }

        &__desc {
            margin: 0;
            @include font(15px, 22px, 400, var(--color-base-350));
        }
    }
}


$ps_name: advcash, alfabank, alipay, alipay_plus, applepay, argentina_bank, atf24, baloto, beeline, blik, boleto, brazil_bank, card, carga_virtual, cash, cashtocode, codi, comepay, cup, cup_bank, cup_p2p, deposit_express, direct_banking_europe, dotpay, ecopayz, eps, giropay, gmmoney, internal_gamemoney, googlepay, ideal, indonesia_bank, indonesia_bank_transfer, internal, jeton, jeton_voucher, kassa24, link, local_card_brazil, local_card_mexico, loterica, malaysia_bank, megafon, mexico_bank, momopay, moneta, mts, multibanco, neosurf, neteller, nupay, onecard, oxxo, pagoefectivo, pagoexpress, pagofacil, paypal, paysafecard, picpay, pix, philippines_bank, promptpay, promsviaz, przelewy24, qiwi, rapid, rapipago, redpagos, sberbank, sbp, sepa, servipag, skinify, skinpay, skinsback, skrill, sofort, spei, store_mexico, tele2, thailand_bank, thailand_bank_transfer, tinkoff, trustly, vietnam_bank, vietnam_bank_qr, vietnam_bank_transfer, webpay, wechat, wme, wmr, wmu, wmz, zen_wallet, yandex, wallester, bitcoin, tron, ethereum, tether, tether_trc20, mercado_pago, mirpay, mbway;

@mixin load_PS_icons($ps_name: $ps_name) {
    .ps-icon {
        @each $name in $ps_name {
            $icon_name: $name;
            @if ($name == jeton_voucher) {
                $icon_name: jeton;
            }
            @if ($name == local_card_brazil) {
                $icon_name: brazil_bank;
            }
            @if ($name == thailand_bank_transfer) {
                $icon_name: thailand_bank;
            }
            @if ($name == indonesia_bank_transfer) {
                $icon_name: indonesia_bank;
            }
            @if ($name == vietnam_bank_qr or $name == vietnam_bank_transfer) {
                $icon_name: vietnam_bank;
            }
            @if ($name == internal_gamemoney or $name == internal) {
                $icon_name: gmmoney;
            }
            @if ($name == tether_trc20) {
                $icon_name: tether;
            }
            @if ($name == wme or $name == wmr or $name == wmu or $name == wmz) {
                $icon_name: webmoney;
            }
            &-#{$name} {
                background-image: url(#{vars.$trm-tmpl-assets-base-url}/svg/pay/#{$icon_name}.svg) !important;
            }
        }
    }
}


$currencies: RUB, USD, EUR, BTC, ETH, USDT, TRX, CNY, BRL, MXN, UAH, KZT, GBP;
@mixin load_currency_icons($currencies: $currencies) {
    .trm-icon {
        width: 24px;
        height: 24px;
        display: inline-block;
        @each $curr in $currencies {
            &.trm-curr-#{string.to-lower-case($curr)} {
                background-image: url(#{vars.$trm-tmpl-assets-base-url}/svg/currencies/#{string.to-lower-case($curr)}.svg);
                background-repeat: no-repeat;
                background-size: contain;
            }
        }
    }
}