@import "uikit/uikit.css";
@import "variables";
@import "uikit_fix";


html, body {
    font-family: 'Roboto', sans-serif;
    transition-duration: .3s;
}

@mixin render_theme($theme) {
    body {
        background-color: map_get(map_get($themes, $theme), 'primary');
        color: map_get(map_get($themes, $theme), 'primary-text')
    }

    #app {
        min-height: 100vh;
    }

    .nav {
        z-index: 99;

        background-color: map_get(map_get($themes, $theme), 'primary');
        box-shadow: map_get(map_get($themes, $theme), 'shadow');

        .uk-navbar-nav > li > a {
            color: map_get(map_get($themes, $theme), 'primary-text');
            text-transform: none;

            &:hover, &.active {
                text-decoration: underline;
            }
        }
    }

    .top-wrap-height {
        height: 80vh;
        min-height: 460px;
        transition: height 0.25s;
    }

    .subtitle-text {
        font-size: 1.2em;
        opacity: 0.7;
    }
}

html[data-theme="dark"] {
    @include render_theme('dark')
}
html[data-theme="light"] {
    @include render_theme('light')
}