@use "sass:map";
@use './consts.scss' as consts;

$breakpoints: (
    lg: 1420px,
    md: 1048px,
    sm: 768px,
);

@mixin media($name){
    @media (max-width: map.get($breakpoints, $name)) {
        @content
    }
}

$text-sizes: (
    'heading': (size: 96px, weight: 400, family: "Cormorant Garamond", height: 1 ),
    'heading-2': (size: 64px, weight: 500, family: "Cormorant Garamond", height: 1 ),
    'heading-4': (size: 40px, weight: 500, family: "Cormorant Garamond", height: 1 ),
    'heading-5': (size: 32px, weight: 600, family: "Cormorant Garamond", height: 1 ),
    'heading-6': (size: 32px, weight: 500, family: "Cormorant Garamond", height: 1 ),
    'heading-7': (size: 24px, weight: 700, family: "Cormorant Garamond", height: 1 ),
    'heading-8': (size: 18px, weight: 600, family: "Cormorant Garamond", height: 1.21 ),
    'text-1': (size: 32px, weight: 700, height: 1.174),
    'text-3': (size: 20px, weight: 700, height: 1.174),
    'text-4': (size: 16px, weight: 500, height: 1.17),
    'text-4-bold': (size: 16px, weight: 700, height: 1.17),
    'text-5-bold': (size: 14px, weight: 700, height: 1.17),
    'text-5': (size: 14px, weight: 500, height: 1.17),
    'text-default': (size: 14px, weight: 400, height: 1.15),
);


@mixin text($name){
    $properties: map.get($text-sizes, $name);
    
    font-size: map.get($properties, 'size');
    font-weight: map.get($properties, 'weight');
    font-family: map.get($properties, 'family');
    font-style: map.get($properties, 'style');
    line-height: map.get($properties, 'height');
}

@mixin circle-base($circle-size: 80px){
    position: absolute;
    display: inline-block;
    content: ' ';
    border-radius: 50%;
    width: $circle-size;
    height: $circle-size;
    bottom: calc(($circle-size/2) * -1);
    background-color: consts.$schema-background;
}

@mixin lineClamp($lines) {
    display: -webkit-box;
    -webkit-line-clamp: $lines;
    -webkit-box-orient: vertical;
    overflow: hidden;
}