@import "variables";
@import "base";
@import "mediaqueries";
@import "fonts";
@import "reset";
@import "keyframes";
@import "layout";
@import "mixin";
@import "silent_class";

html { scroll-behavior: smooth; }
.no_scroll { overflow: hidden; }
.hide { display: none !important; }

.homepage {
    --c1: #{$c1};
    --c3: #{$c3};
    --c6: #{$c6};
    --cbrand1: #{$c4};
}

.awaypage {
    --c1: #{$c1};
    --c3: #{$c3a_j};
    --c4: #{$c4a_j};
    --c5: #{$c5a_j};

    &.fed_1 {
        --c1: #{$c1};
        --c3: #{$c3a_j};
        --c4: #{$c4a_j};
        --c5: #{$c5a_j};
    }

    &.fed_2 {
        --c1: #{$c1};
        --c3: #{$c3a_j2};
        --c4: #{$c4a_j2};
        --c5: #{$c5a_j};
    }
    &.fed_3 {
        --c1: #{$c1};
        --c3: #{$c3a_j3};
        --c4: #{$c4a_j3};
        --c5: #{$c5a_j};
    }
}

.jerseypage {
    --c1: #{$c4};
    --c3: #{$c3};
    --c5: #{$c5};
    --c5a: #{rgba($c5, 0.9)};
    --c6: #{$c6};
    --c7_lp: #{$c1};

    --c8_lp: #{$c7};
    --c9_lp: #{$c6};

    --c10_lp: #{$c1};
    --img_ct2: #{url($if0 + "bg_block2.webp")};
    --cbrand1: #{$c4};

    // Variables for the back gradient of the federation cards
    --c11_l: #{$c3};
    --c12_l: #{$c6};

    // Single federation variables
    --c_info_mexico: #{$c3};
    --c_info_argentina: #{$c3f2};
    --c_info_alemania: #{$c4f1};

    &.fed_1 {
        --c1: #{$c3f1};
        --c3: #{$c1};
        --c5: #{$c5};
        --c5a: #{rgba($c5, 0.9)};
        --c6: #{$c6f1};
        --c7_lp: #{$c2};

        --c8_lp: #{$c1};
        --c9_lp: #{$c6f1};

        --c10_lp: #{$c2};
        --img_ct2: #{url($if1 + "bg_block2.webp")};
        --cbrand1: #{$c3f1};
        --c11_l: #{$c3};
        --c12_l: #{$c6};
    }

    &.fed_2 {
        --c1: #{$c1};
        --c3: #{$c3f2};
        --c5: #{$c5};
        --c5a: #{rgba($c5, 0.9)};
        --c6: #{$c6f2};
        --c7_lp: #{$c1};

        --c8_lp: #{$c5f2};
        --c9_lp: #{$c6f2};

        --img_ct2: #{url($if2 + "bg_block2.webp")};
        --cbrand1: #{$c1};
        --c11_l: #{$c3f2};
        --c12_l: #{$c5f2};
    }
}

.fullpage {
    --c1: #{$c1};
    --c3: #{$c1f_l};
}

body {
    @include bc(var(--c3), var(--c1));
    @include font(100%);
    @include no-margins;
    @include no-border;
    @include scroll((
        width: 0px,
        bg: $c0,
        color: $c0
    ));
}

.main_container {
    @include wh(100vw);
    @include position;
    padding-block-start: 25px;
}