@use "config" as *;
@use "../_global/index" as *;

// placeholder fonts
%font-family-roboto {
    font-family: Roboto, sans-serif;
}

%font-family-roboto-bold {
    font-family: Roboto, sans-serif;
    font-weight: 700;
}

%font-family-roboto-normal {
    font-family: Roboto, sans-serif;
    font-weight: 500;
}

%font-family-roboto-regular {
    font-family: Roboto, sans-serif;
    font-weight: 400;
}

%font-menu-item {
    @extend %font-family-roboto;
    @include font-size(20px);
    @include line-height(24px);
    color: black;
}


%font-menu-item-active {
    @extend %font-family-roboto;
    @include font-size(20px);
    @include line-height(24px);
    color: $color-red;
}

%font-menu-footer-item {
    @extend %font-family-roboto;
    @extend %font-family-roboto-regular;
    @include font-size(18px);
    @include line-height(20px);
    color: $color-white;
}

%font-roboto-bold-40-60 {
    @extend %font-family-roboto-bold;
    @include font-size(40px);
    @include line-height(48px);

    @include mq(desktop) {
        @include font-size(60px);
        @include line-height(72px);
    }
}

%font-roboto-bold-32-48 {
    @extend %font-family-roboto-bold;
    @include font-size(32px);
    @include line-height(48px);

    @include mq(desktop) {
        @include font-size(48px);
        @include line-height(60px);
    }
}

%font-roboto-bold-28-48 {
    @extend %font-family-roboto-bold;
    @include font-size(28px);
    @include line-height(40px);

    @include mq(desktop) {
        @include font-size(48px);
        @include line-height(60px);
    }
}

%font-roboto-bold-28-40 {
    @extend %font-family-roboto-bold;
    @include font-size(28px);
    @include line-height(40px);

    @include mq(desktop) {
        @include font-size(40px);
        @include line-height(48px);
    }
}

%font-roboto-bold-24-32 {
    @extend %font-family-roboto-bold;
    @include font-size(24px);
    @include line-height(40px);

    @include mq(desktop) {
        @include font-size(32px);
        @include line-height(48px);
    }
}

%font-roboto-bold-24-32-2 {
    @extend %font-family-roboto-bold;
    @include font-size(24px);
    @include line-height(32px);

    @include mq(desktop) {
        @include font-size(32px);
        @include line-height(40px);
    }
}

%font-roboto-bold-20-24 {
    @extend %font-family-roboto-bold;
    @include font-size(20px);
    @include line-height(28px);

    @include mq(desktop) {
        @include font-size(24px);
        @include line-height(32px);
    }
}

%font-roboto-bold-18-20 {
    @extend %font-family-roboto-bold;
    @include font-size(18px);
    @include line-height(28px);

    @include mq(desktop) {
        @include font-size(20px);
        @include line-height(32px);
    }
}

%font-roboto-regular-18-20 {
    @extend %font-family-roboto-regular;
    @include font-size(18px);
    @include line-height(24px);

    @include mq(desktop) {
        @include font-size(20px);
        @include line-height(24px);
    }
}

%font-roboto-regular-20 {
    @extend %font-family-roboto-bold;
    @include font-size(20px);
    @include line-height(24px);
}

%font-roboto-regular-18 {
    @extend %font-family-roboto-regular;
    @include font-size(18px);
    @include line-height(20px);
}

%font-roboto-16-18 {
    @include font-size(16px);
    @include line-height(28px);

    @include mq(desktop) {
        @include font-size(18px);
        @include line-height(32px);
    }
}

%font-roboto-16-18-2 {
    @extend %font-family-roboto-regular;
    @include font-size(16px);
    @include line-height(20px);
}

%font-roboto-14-16 {
    @extend %font-family-roboto;
    @extend %font-family-roboto-normal;
    @include font-size(14px);
    @include line-height(17px);

    @include mq(desktop) {
        @include font-size(16px);
        @include line-height(19px);
    }
}

%font-roboto-16 {
    @extend %font-family-roboto;
    @include font-size(16px);
    @include line-height(19px);
}

%font-roboto-14 {
    @extend %font-family-roboto;
    @extend %font-family-roboto-normal;
    @include font-size(14px);
    @include line-height(16px);
}

%font-roboto-12-14 {
    @extend %font-family-roboto;
    @extend %font-family-roboto-normal;
    @include font-size(12px);
    @include line-height(16px);

    @include mq(desktop) {
        @include font-size(14px);
        @include line-height(18px);
    }
}

// general placeholders
%primary-button {
    @extend %font-roboto-16;
    border: none;
    color: $color-white;
    height: 48px;
    padding: 12px 20px;

    &.is-mobile-small {
        @extend %font-roboto-14-16;
        height: 40px;
        padding: 12px 16px;

        @include mq(desktop) {
            height: 48px;
            padding: 12px 20px;
        }
    }

    &.has-bg-red {
        background: red;

        &:hover {
            background: blue;
            color: white;
        }
    }

    &.has-bg-green {
        background: green;

        &:hover {
            background: red;
            color: white;
        }
    }
}

%secondary-button {
    @extend %font-roboto-16;
    height: 48px;
    background: transparent;
    padding: 12px 20px;

    &.is-mobile-small {
        @extend %font-roboto-14-16;
        height: 40px;
        padding: 12px 16px;

        @include mq(desktop) {
            height: 48px;
            padding: 12px 20px;
        }
    }

    &.has-border-red {
        color: $color-red;
        border: 1.5px solid $color-red;

        &:hover {
            color: $color-blue;
            border: 1.5px solid $color-blue;
        }
    }

    &.has-border-green {
        color: $color-green;
        border: 1.5px solid $color-green;

        &:hover {
            color: $color-blue;
            border: 1.5px solid $color-blue;
        }
    }

    &.has-border-black {
        color: black;
        border: 1.5px solid black;

        &:hover {
            color: $color-red;
            border: 1.5px solid $color-red;
        }
    }
}

%tertiary-button {
    @extend %font-roboto-14;
    height: 40px;
    background: $color-light-grey;
    padding: 12px 16px;
    color: black;
    border: none;
    border-radius: 40px;

    &:hover {
        color: $color-white;
        background: $color-blue;
    }

    &.is-mobile-small {
        @extend %font-roboto-14-16;
        height: 40px;
        padding: 12px 16px;

        @include mq(desktop) {
            height: 48px;
            padding: 12px 20px;
        }
    }
}