@use "sass:meta";
@use "../abstracts/mixins";
@use "../abstracts/variables";

*, *::before, *::after, *:before, *:after, *:focus, *:active{
    box-sizing: border-box;
    outline: none;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    -ms-interpolation-mode: bicubic;
}

@include meta.load-css('ress');

html{
    font-size: variables.$baseFontSize;
    line-height: variables.$baseLineHeight;
    
    @include mixins.respondTo('md'){
        font-size: variables.$baseFontSizeMd;
    }

    @include mixins.respondTo('sm'){
        font-size: variables.$baseFontSizeSm;
    }

    @include mixins.respondTo('xs'){
        font-size: variables.$baseFontSizeXs;
    }
}

body{
    background: variables.$baseBackgroundColor;
    font-family: variables.$baseFontFamily;
    letter-spacing: variables.$baseLetterSpacing;
    color: variables.$baseTextColor;
}

*::selection{ background: variables.$selectionBackgroundColor; color: variables.$selectionColor; }
*::-moz-selection{ background: variables.$selectionBackgroundColor; color: variables.$selectionColor; }
*::-webkit-selection{ background: variables.$selectionBackgroundColor; color: variables.$selectionColor; }

img{
    max-width: 100%;
}

a:not([class]){
    &, &:visited{
        color: currentColor;
        text-decoration: none;
    }

    &:focus{
        text-decoration: underline;
    }

    @include mixins.hover{
        text-decoration: underline;
    }
}

p{
    margin: 0;

    & + p{
        margin-top: 1.5rem;
    }
}

ul{
    padding: 0;
    margin: 0;

    &, li{
        list-style: none;
    }
}

h1, h2, h3, h4, h5, h6{
    margin: 0;
    font-weight: normal;
    font-size: 1rem;
}

strong, b{
    font-weight: 700;
}

a, button{
    -webkit-tap-highlight-color: transparent;
}