.site-masthead {

@include themer(background, (
    'dark': $site-ui-header-dark-color1,
    'light': $site-ui-header-light-color1,
));
@include themer(background, (
    'dark': linear-gradient(135deg, $site-ui-header-dark-color1, $site-ui-header-dark-color2),
    'light': linear-gradient(135deg, $site-ui-header-light-color1, $site-ui-header-light-color2),
));

color: white;
position: relative;

&::after {
    @include themer(background, (
        'dark': linear-gradient(135deg, transparent 50px, $background-color-dark 50px),
        'light': linear-gradient(135deg, transparent 50px, $background-color-light 50px),
    ));

    bottom: 0;
    content: "";
    height: 50px;
    position: absolute;
    right: 0;
    width: 30%;
}

}

.site-masthead__button {

@include themer(border-color, (
    'dark': $site-ui-masthead-color-dark,
    'light': $site-ui-masthead-color-light,
));
@include themer(color, (
    'dark': $site-ui-masthead-color-dark,
    'light': $site-ui-masthead-color-light,
));

border-radius: 5px;
border-style: solid;
border-width: 1px;
display: inline-block;
font-size: 1.25rem;
padding: 0.75rem 2rem;

&:hover {
    @include themer(background-color, (
        'dark': $site-ui-masthead-color-dark,
        'light': $site-ui-masthead-color-light,
    ));
    @include themer(color, (
        'dark': $site-ui-brand-dark,
        'light': $site-ui-brand-light,
    ));

    text-decoration: none;
}

}

.site-masthead__version {

font-size: 0.8rem;

}