@font-face {
    font-family: "Lato";
    font-weight: normal;
    font-style: normal;

    src: url("../../fonts/Lato/Lato-Regular.ttf") format("truetype");
}

@font-face {
    font-family: "Lato";
    font-weight: bold;
    font-style: normal;

    src: url("../../fonts/Lato/Lato-Bold.ttf") format("truetype");
}

* {
    font-family: $font-stack;
    font-weight: normal;

    box-sizing: border-box;

    .mat-icon {
        color: $neutral-50 ;
    }
}

p {
    margin: $spacing-xs 0;

    color: $neutral-10;

    line-height: 1.2;
    font-size: $font-m;
}

a,
.link-style {
    position: relative;

    transition: all .2s ease-in-out;

    color: $secondary;

    text-decoration: none;
    line-height: normal;
    font-size: $font-m;

    cursor: pointer;

    @include notouch-hover {
        &:after {
            transform: translate3d(0, 4px, 0);
            opacity: 1;
        }
    }

    &:after {
        position: absolute;
        bottom: 0;
        left: 0;

        opacity: 0;
        width: 100%;
        height: 1px;
        transition: opacity 300ms, transform 300ms;

        background-color: $secondary;

        content: "";

        @include touch-styles {
            transform: translate3d(0, 4px, 0);
            opacity: 1;
        }
    }
}

button {
    font-weight: bold;
}

.heading-1 {
    margin: $spacing-s 0;
    //Entre 45px y 28px

    line-height: 1.2;

    @include fluid-type(320px, 1400px, $font-l, $font-2xl);
}

.heading-2 {
    margin: $spacing-s 0;
    //Entre 36px y 28px

    line-height: 1.2;

    @include fluid-type(320px, 1400px, $font-l, $font-xl);
}

.heading-3 {
    margin: $spacing-xs 0 $spacing-m;
    //Entre 24px y 16px

    @include fluid-type(320px, 1400px, 20px, $font-xs*2);
}

.heading-4 {
    margin: $spacing-xs 0 $spacing-m;

    font-size: $font-m*1.3;
}

.heading-5 {
    margin: $spacing-xs 0 $spacing-m;

    font-size: $font-m*1.1;

    @include fluid-type(320px, 1400px, $font-m, $font-xs*1.5);
}

.no-margin {
    margin: 0;
}

.text-bold {
    font-weight: bold;
}

.text-primary {
    color: $primary !important;
}

.text-secondary {
    color: $secondary;
}

.text-neutral-50 {
    color: $neutral-50;
}

.text-red {
    color: $error;
}

.align-items-baseline {
    align-items: baseline;
}

.subtitle {
    color: $neutral-50;

    font-size: $font-s;

    mat-icon {
        position: relative;
        top: 3px;

        width: 20px;
        height: 20px;

        font-size: 20px;
    }
}