@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_j2};
        --c4: #{$c4a_j2};
        --c5: #{$c5a_j};
    }

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

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

.jerseypage {
    --c1: #{$c4};
    --c2: #{$c2};
    --c3: #{$c3};
    --c4: #{$c4};
    --c5: #{$c5};
    --c5a: #{rgba($c5, 0.9)};
    --c6: #{$c6};
    --c7_lp: #{$c1};
    --c8_lp: #{$c7};
    --c9_lp: #{$c6};
    --c10_lp: #{$c1};
    --img_ct2: #{url($if1 + "bg_block2.webp")};
    --cbrand1: #{$c4};
    --c1_j: #{$c1_j};
    --c2_j: #{$c2_j};

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

    // Single federation variables
    --c_info_argentina: #{$c3};
    --c_info_colombia: #{$c7f1};
    --c_info_mexico: #{$c3f2};

    /* &.fed_1, &#fed_1_colors {
        --c1: #{$c4};
        --c3: #{$c3f1};
        --c5: #{$c5};
        --c5a: #{rgba($c5, 0.9)};
        --c6: #{$c4f1};
        --c7_lp: #{$c1};
        --c8_lp: #{$c5f1};
        --c9_lp: #{$c6f1};
        --c10_lp: #{$c2};
        --img_ct2: #{url($if1 + "bg_block2.webp")};
        --cbrand1: #{$c4};
        --c11_l: #{$c3};
        --c12_l: #{$c6};
    } */

}

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;
}