// Footer component styles

@use "../../shared/animation";
@use "../../shared/media";
@use "../../shared/style";
@use "../../shared/theme";
@use "sass:map";

@use "../../resets/heading/shared" as heading;
@use "../../utilities/marker/shared" as marker;

// Selector prefix
$prefix: "cwf" !default;

.#{$prefix}-footer {
    background-color: var(--cwf-footer--background-color);
    font-family: theme.font--sans-serif();
    color: var(--cwf-footer--color);
}

// Footer dark colors
$background-color--dark: style.color("black") !default;
$color--dark: style.color("white") !default;
$column--middle__border-color--dark: style.lighten(
    "black",
    6.5%
) !default; // #111111
$link__color--dark: style.color("gold") !default;
$link--standards__color--dark: style.darken(
    "white-darkest",
    16.5%
) !default; // #aaaaaa
$address__color--dark: style.darken("white-darkest", 16.5%) !default; // #aaaaaa

// Footer light colors
$background-color--light: style.lighten(
    "white-darkest",
    49%
) !default; // #e5e5e5
$color--light: style.color("gray-darkest") !default;
$column--middle__border-color--light: style.darken(
    "white-darkest",
    3.5%
) !default; // #c5c5c5
$link__color--light: style.color("blue", "accent") !default;
$link--standards__color--light: style.color("blue", "accent") !default;
$address__color--light: style.color("gray-darkest") !default;

// Footer themes
$themes: (
    "dark": (
        "background-color": $background-color--dark,
        "color": $color--dark,
        "column-middle-border-color": $column--middle__border-color--dark,
        "a-color": $link__color--dark,
        "a-standards-color": $link--standards__color--dark,
        "address-color": $address__color--dark
    ),
    "light": (
        "background-color": $background-color--light,
        "color": $color--light,
        "column-middle-border-color": $column--middle__border-color--light,
        "a-color": $link__color--light,
        "a-standards-color": $link--standards__color--light,
        "address-color": $address__color--light
    )
);

$theme--keys: "background-color", "color", "column-middle-border-color",
    "a-color", "a-standards-color", "address-color", "theme";

@function theme--validate($instructions) {
    @return map.keys($instructions) == $theme--keys;
}

@mixin theme($instructions) {
    @if theme--validate($instructions) {
        $theme: map.get($instructions, "theme");
        $background-color: map.get($instructions, "background-color");
        $color: map.get($instructions, "color");
        $column-middle-border-color: map.get(
            $instructions,
            "column-middle-border-color"
        );
        $a-color: map.get($instructions, "a-color");
        $a-standards-color: map.get($instructions, "a-standards-color");
        $address-color: map.get($instructions, "address-color");
        .#{$prefix}-footer--#{$theme} {
            --cwf-footer--background-color: #{$background-color};
            --cwf-footer--color: #{$color};
            --cwf-footer__column--middle--border-color: #{$column-middle-border-color};
            --cwf-footer__a--color: #{$a-color};
            --cwf-footer__a--standards--color: #{$a-standards-color};
            --cwf-footer__address--color: #{$address-color};
        }
    } @else {
        @warn "Invalid footer theme instructions provided!";
    }
}

@mixin theme--official($theme) {
    $colors: map.get($themes, $theme);

    $instructions: map.merge(
        $colors,
        (
            "theme": $theme
        )
    );

    @include theme($instructions);
}

@each $theme, $colors in $themes {
    @include theme--official($theme);
}

.#{$prefix}-footer__container {
    @include theme.contain;
}

.#{$prefix}-footer__controller {
    @include media.breakpoint {
        display: flex;
        flex-wrap: wrap;
    }
}

.#{$prefix}-footer__column {
    flex: 1;
    margin-bottom: 2rem;
    padding-left: 2rem;
    padding-right: 2rem;

    @include media.breakpoint {
        margin-top: 2rem;
        margin-bottom: 1rem;
    }
}

.#{$prefix}-footer__column--left {
    margin-top: 2rem;
}

.#{$prefix}-footer__column--middle {
    @include media.breakpoint {
        margin-bottom: 2rem;
        border-left: 1px solid var(--cwf-footer__column--middle--border-color);
        border-right: 1px solid var(--cwf-footer__column--middle--border-color);
    }
}

.#{$prefix}-footer__column--middle,
.#{$prefix}-footer__column--right {
    @include media.breakpoint {
        padding-top: 89px;
    }
}

.#{$prefix}-footer__item {
    line-height: 1.625rem;
}

.#{$prefix}-footer__item--address {
    margin-bottom: 2rem;
}

.#{$prefix}-footer__address {
    font-style: normal;
    color: var(--cwf-footer__address--color);
}

.#{$prefix}-footer__item--social-list {
    @include media.breakpoint {
        text-align: right;
    }
}

.#{$prefix}-footer__item--wysiwyg {
    @include style.children;

    @include heading.clamp("h4");

    a {
        color: var(--cwf-footer__a--color);
        font-weight: 700;
        &:active,
        &:focus,
        &:hover {
            text-decoration: none;
        }
    }
}

.#{$prefix}-footer__link {
    font-weight: 700;
    color: var(--cwf-footer__a--color);
    @include animation.transition(color);
    &:active,
    &:hover,
    &:focus {
        text-decoration: none;
    }
}

.#{$prefix}-footer__link--department,
.#{$prefix}-footer__link--division,
.#{$prefix}-footer__link--university {
    &:active,
    &:hover,
    &:focus {
        text-decoration: underline;
    }
}

.#{$prefix}-footer--dark .#{$prefix}-footer__link {
    color: var(--cwf-footer--color);
    &:active,
    &:hover,
    &:focus {
        color: var(--cwf-footer__a--color);
    }
}

.#{$prefix}-footer--dark .#{$prefix}-footer__link--department,
.#{$prefix}-footer--dark .#{$prefix}-footer__link--division,
.#{$prefix}-footer--dark .#{$prefix}-footer__link--university {
    color: var(--cwf-footer__a--color);
}

// Footer link social colors
$link--social__border-color: style.color("gray-light") !default;
$link--social__background-color--active: style.color("gold") !default;
$link--social__color--active: style.color("black") !default;

.#{$prefix}-footer__link--social {
    border: 2px solid var(--cwf-footer__link--social--border-color);
    border-radius: 50%;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    font-size: 1.5rem;
    height: 2.75rem;
    width: 2.75rem;
    color: var(--cwf-footer--color);
    text-decoration: none;
    @include animation.transition(background-color, color);
    --cwf-footer__link--social--border-color: #{$link--social__border-color};
    --cwf-footer__link--social--active--background-color: #{$link--social__background-color--active};
    --cwf-footer__link--social--active--color: #{$link--social__color--active};

    &:active,
    &:hover,
    &:focus {
        background-color: var(
            --cwf-footer__link--social--active--background-color
        );
        color: var(--cwf-footer__link--social--active--color) !important;
    }
}

.#{$prefix}-footer__link--social-2 {
    font-size: 1.5rem;
}

.#{$prefix}-footer__link--social-2 .fa-stack {
    border-radius: 50%;
}

.#{$prefix}-footer__link--department {
    font-size: 1rem;
    text-decoration: none;
}

.#{$prefix}-footer__link--division {
    font-size: 1.125rem;
    text-decoration: none;
}

.#{$prefix}-footer__link--seal {
    display: block;
    font-size: 1.222rem;
    text-decoration: none;
}

.#{$prefix}-footer__link--university {
    font-size: 1.222rem;
    text-decoration: none;
}

.#{$prefix}-footer__link--standards {
    color: var(--cwf-footer__a--standards--color) !important;
}

.#{$prefix}-footer__seal {
    background-repeat: no-repeat;
    background-size: contain;
    display: inline-block;
    height: 80px;
    margin-bottom: 0.5rem;
    margin-left: auto;
    margin-right: auto;
    margin-top: 0;
    vertical-align: top;
    width: 256px;
}

// Footer images
$seal__path: "/img/seal/" !default;
$seal__simple: "vcu-simple-seal.svg" !default;
$seal__regular: "vcu-seal.svg" !default;
$seal__simple--dark: "vcu-simple-seal--dark.svg" !default;
$seal__regular--dark: "vcu-seal--dark.svg" !default;

.#{$prefix}-footer--dark .#{$prefix}-footer__seal {
    background-image: url($seal__path + $seal__simple);

    @include media.breakpoint {
        background-image: url($seal__path + $seal__regular);
    }
}

.#{$prefix}-footer--light .#{$prefix}-footer__seal {
    background-image: url($seal__path + $seal__simple--dark);

    @include media.breakpoint {
        background-image: url($seal__path + $seal__regular--dark);
    }
}

.#{$prefix}-footer__social-item {
    display: inline-block;
    font-size: 0;
    padding-bottom: 0.5rem;
    padding-left: 0.5rem;
}

.#{$prefix}-footer__social-item:first-child {
    padding-left: 0;
}

.#{$prefix}-footer__standards {
    display: flex;
    flex-direction: column;
    grid-column: span 3;
    justify-content: center;
    flex-basis: 100%;
    width: 100%;
    padding-bottom: 2rem;
    padding-left: 2rem;
    padding-right: 2rem;

    @include media.breakpoint {
        flex-direction: row;
        padding-bottom: 1rem;
        font-size: 0.75rem;
    }
}

// Footer item standards colors
$item--standards--separator__color: style.darken(
    "white-darkest",
    13.5%
) !default; // #aaaaaa

.#{$prefix}-footer__item--standards {
    color: var(--cwf-footer__a--standards--color);
    --cwf-footer__item--standards--separator-color: #{$item--standards--separator__color};

    &:after {
        @include media.breakpoint {
            content: "";
            display: inline-block;
            height: 1em;
            margin-left: 0.5rem;
            margin-right: 0.5rem;
            border-right: 0.1em solid
                var(--cwf-footer__item--standards--separator-color);
            transform: rotate(20deg);
            position: relative;
            top: 0.15em;
        }
    }
}

.#{$prefix}-footer__item--standards:last-child:after {
    border-right: none;
    margin-left: 0;
    margin-right: 0;
}

.#{$prefix}-footer--dark .#{$prefix}-footer__column--left .fas {
    color: var(--cwf-footer__a--color);
}