$mobileWidth: 500px;

@mixin main-container {
    border-radius: r(6);
    background: color("main-background");
    box-shadow: 0 r(2) r(2) 0 rgba(0, 0, 0, 0.14), 0 r(3) r(1) r(-2) rgba(0, 0, 0, 0.2), 0 r(1) r(5) 0 rgba(0, 0, 0, 0.12);
}

@font-face {
    font-family: "Roboto";
    src: url("@/assets/fonts/Roboto-Regular.woff2");
    font-weight: 400;
}
@font-face {
    font-family: "Roboto";
    src: url("@/assets/fonts/Roboto-Bold.woff2");
    font-weight: 700;
}

@font-face {
    font-family: "Roboto";
    src: url("@/assets/fonts/Roboto-Light.woff2");
    font-weight: 300;
}

@font-face {
    font-family: "Roboto";
    src: url("@/assets/fonts/Roboto-Italic.woff2");
    font-weight: 400;
    font-style: italic;
}

@mixin define-color($title, $color) {
    --#{$title}-h: #{hue($color)};
    --#{$title}-s: #{saturation($color)};
    --#{$title}-l: #{lightness($color)};
    --#{$title}-a: #{alpha($color)};
}

@function color($title, $hue: 0deg, $lightness: 0%, $saturation: 0%, $alpha: 0) {
    @return hsla(
        calc(var(--#{$title}-h) + #{$hue}),
        calc(var(--#{$title}-s) + #{$saturation}),
        calc(var(--#{$title}-l) + #{$lightness}),
        calc(var(--#{$title}-a) + #{$alpha})
    );
}

@function r($value) {
    @return ($value / 10) + rem;
}
