//-----------------------------------
//Mixin
//-----------------------------------
@use "../../../../src/sisass" as *;
@use "./variables" as *;

@mixin tagline_sisass($attr: ()) {
    $c: mapv($attr, c, var(--theme_text));

    .tagline_sisass {
        font-family: $f3;
        font-weight: 900;
        text-transform: uppercase;
        color: $c;
    }
}

@mixin t1($attr: ()) {
    $f: mapv($attr, f, $f1);
    $s: mapv($attr, s, szrem(16));
    $w: mapv($attr, w, normal);
    $a: mapv($attr, a, justify);
    $lh: mapv($attr, lh, 1.3);
    $bg: mapv($attr, bg, $c0);
    $c: mapv($attr, c, var(--theme_text));
    $bgb: mapv($attr, bgb, $c0);
    $cb: mapv($attr, cb, var(--theme_text_bold));
    $wr: mapv($attr, wr, initial);
    $tf: mapv($attr, t, initial);

    @include tf(( f: $f, s: $s, a: $a, lh: $lh, w: $w, wr: $wr, t: $tf ));
    @include bc($bg, $c);
    @include tagline_sisass(( c: $c ));

    b {
        @include bc($bgb, $cb);
        @include tf(( f: $f, s: $s, a: $a, w: bold ));
    }
}

@mixin btn($attr: ()) {
    $w: mapv($attr, w, 200px);
    $h: mapv($attr, h, auto);
    $as: mapv($attr, as, calc(200 / 45));
    $bd: mapv($attr, bd, $bd10);
    $bg: mapv($attr, bg, $c0);
    $c: mapv($attr, (color, c), var(--theme_btn_text));
    $r: mapv($attr, (radius, r), 9px);
    $g: mapv($attr, (gap, g), 8px);

    @include center-flex-row;
    @include transition(all $t3);
    @include transform(translateY(0));
    @include border-radius($r);
    @include bc($bg, $c);
    @include wh($w, $h);
    @include gap($g);
    cursor: pointer;
    aspect-ratio: $as;
    border: $bd;

    &:hover {
        @include transition(all $t3);
        @include transform(translateY(-5%));
        @include box-shadow($sh2);
    }
}

@mixin bg_list() {
    @include t1(( f: $f4, s: szrem(16), w: bold, lh: 1, a: center ));
    @include bc(rgb-alpha($c17, 0.14), var(--theme_text_bold));
    @include align_self(center);
    @include align_items(center);
    @include justify_content(center);
    @include border-radius(10px);
    @include whs(42px);
    flex: 0 0 42px;
    display: inline-flex;
}

 @mixin tagline($attr: ()) {
    $bg: mapv($attr, bg, $c21);
    $c: mapv($attr, c, var(--theme_text));
    $w: mapv($attr, w, max-content);
    $h: mapv($attr, h, 25px);
    $r: mapv($attr, r, 15px);
    $p: mapv($attr, p, 10px 14px);

    @include center-flex-row;
    @include border-radius($r);
    @include bc($bg, $c);
    @include wh($w, $h);
    padding: $p;
 }

//-----------------------------------
//End Mixin
//-----------------------------------