@use "sass:map";
@use "./variables" as var;
@use "./functions" as fn;
@use "./typography" as tg;

.web-app {
    box-sizing: border-box;
    font-family: var.$rijksSansFontFamily;
    @include tg.body;
    color: var.$defaultTextColor;

    * {
        &,
        &:before,
        &:after {
            box-sizing: border-box;
        }
    }
}

a {
    $color: map.get(var.$roColors, "skyBlue");

    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;

    &,
    &:visited {
        color: $color;
    }

    &:hover {
        color: fn.getHoverColor($color, "dark");
    }
}
