// Ref: https://github.com/nuxt-community/vuetify-module#customvariables
//
// The variables you want to modify
// $font-size-root: 20px;

$font-inter: 'Inter', sans-serif;
@use 'vuetify' with (
  $body-font-family: $font-inter,
);

p a {
    color: rgb(var(--v-theme-primary));
    text-decoration: none;
    position: relative;

    &:before {
        content: '';
        position: absolute;
        width: 100%;
        height: 2px;
        border-radius: 2px;
        background-color: rgb(var(--v-theme-primary));
        bottom: 0;
        left: 0;
        transform-origin: right;
        transform: scaleX(0);
        transition: transform .3s ease-in-out;
    }

    &:hover::before {
        transform-origin: left;
        transform: scaleX(1);
    }
}

.link {
    color: inherit;
    text-decoration: none;
    transition: all 0.28s cubic-bezier(0.4, 0, 0.2, 1);

    &:hover {
        color: rgb(var(--v-theme-primary));
    }
}