//@import './ultra-violet.sass'
@import './variables.sass'
.wizrd-blog-theme
    background-color: var(--home-background)
    //background-color: var(--background)
    color: var(--background-font)
    h1,
    h2,
    h3,
    h4,
    h5,
    h6,
    p,
    a,
    span
        color: var(--background-font)
    a
        color: var(--button)
        &:hover,
        &:focus,
        &:active
            color: var(--button)
    .wizrd-site-header
        background-color: var(--top-menu)
    .btn
        color: var(--button-font)
        &.btn-primary
            background-color: var(--button)
            border: 1px solid var(--button)
            color: var(--button-font)
            &:hover,
            &:active,
            &:focus,
            &:not(:disabled):not(.disabled):active,
            &:not(:disabled):not(.disabled).active,
                color: var(--button) !important
                border-color: var(--button)
                background-color: var(--button-font)
                box-shadow: none
    .wizrd-site-navigation
        ul
            li
                a
                    color: var(--top-menu-font)
                    &:hover,
                    &:focus,
                    &:active
                        color: var(--button) !important
                &.wizrd-header-social-links
                    a
                        svg
                            path
                                fill: var(--top-menu-font)
                        &:hover,
                        &:focus,
                        &:active
                            svg
                                path
                                    fill: var(--button)
        .wizrd-mobile-icon
            svg
                path
                    stroke: var(--top-menu-font)
        .bar1,
        .bar2,
        .bar3
            background-color: var(--top-menu-font)
    .wizrd-header-logo
        a,
        a:not([href]):not([class])
            color: var(--top-menu-font)
            &:hover,
            &:focus,
            &:active
                color: var(--button)
    .wizrd-site-main
        .wizrd-recent-blogs
            .wizrd-section-heading
                color: var(--home-background-font)
            .wizrd-blog-list
                li
                    .wizrd-blog-box::after
                        background-color: var(--box-shadow)
                    a
                        color: var(--background-font)
                        .wizrd-blog-box
                            .wizrd-blog-detail
                                .wizrd-blog-author
                                    .wizrd-blog-author-name
                                        //color: var(--background-font)
                                        color: $black-color
                                .wizrd-blog-date
                                    //color: var(--background-font)
                                    color: $black-color
                                    span
                                        color: $black-color
            .tabs
                .nav-tabs
                    .nav-item
                        .nav-link
                            color: var(--background-font)
                            &.active
                                //color: var(--button)
                                //border-bottom: 5px solid
    .wizrd-home-banner
        background-color: var(--header-background)
        background-size: 1920px 360px
        h1
            color: var(--header-color)
            span
                background: transparent
                color: var(--header-color)
        h5
            background: transparent
            color: var(--header-color)
        .wizrd-description
            color: var(--header-color)
    .wizrd-site-footer
        .wizrd-copyright
            color: var(--home-background-font)
            span
                color: var(--home-background-font)
.wizrd-top-flags
    svg
        path
            fill: var(--button)
            opacity: 0.8 !important
.wizrd-bottom-flags
    svg
        path
            fill: var(--button)
            opacity: 0.5 !important
.wizrd-top-footer
    background-color: var(--top-menu)
    h2
        color: var(--top-menu-font)
    .wizrd-footer-theme-dots
        fill: var(--button)

.wizrd-blog-theme
    .wizrd-site-main
        .wizrd-recent-blogs
            .pagination
                li
                    a
                        color: var(--background-font)
                        &:hover
                            color: var(--button)
                    &.active
                        a
                            background-color: var(--button)
                            color: var(--button-font) !important
                    &:nth-child(1),
                    &:nth-child(2),
                    &:nth-last-child(1),
                    &:nth-last-child(2)
                        a
                            color: var(--button)

.wizrd-blog-author-details
    span
        color: var(--top-menu-font)

.social-media
    li
        a
            opacity: .6
            svg
                path
                    fill: var(--top-menu-font)
            &:hover,
            &:focus
                opacity: 1




