/// ----------------------------------------------------------------------------------------
/// Logo Styles
/// ----------------------------------------------------------------------------------------
/// @author - Modop
/// @description - The styling for the global header logo
////

/////
/// ----------------------------------------------------------------------------------------
/// @imports - Global imports
/// ----------------------------------------------------------------------------------------
////
@import '../sass/_variables';
@import '../sass/_mixins';
@import '../sass/_functions';

/////
/// ----------------------------------------------------------------------------------------
/// @description - All viewport widths up to infinity
/// ----------------------------------------------------------------------------------------
////
@media (min-width: $mobile) {
    .logo-container {
        position: absolute;
        z-index: 7;

        &:after {
            clip-path: polygon(3.5rem .9375rem, 0 7rem, 14rem 7rem);
            content: '';
            background-color: $primary;
            border-bottom: rem-calc(6) solid $light;
            height: rem-calc(112);
            left: 0;
            position: absolute;
            top: 0;
            transform-origin: bottom left;
            transform: rotate(-30deg);
            transition-duration: .5s;
            width: rem-calc(352);
        }

        .logo {
            background: url(../assets/images/hpp-logo.svg) no-repeat;
            background-size: contain;
            display: block;
            height: rem-calc(38);
            margin: rem-calc(10 0 0 20);
            position: relative;
            transition-duration: .5s;
            width: rem-calc(48);
            z-index: 8;
        }
    }
}
/// End of Mobile Up

/////
/// ----------------------------------------------------------------------------------------
/// @description - Tablet (768px) viewport widths up to infinity
/// ----------------------------------------------------------------------------------------
////
@media (min-width: $tablet) {
    .logo-container {
        &:after {
            clip-path: polygon(4.75rem 1.25rem, 0 9.5rem, 19rem 9.5rem);
            height: rem-calc(152);
            width: rem-calc(352);
        }

        .logo {
            height: rem-calc(52);
            margin: rem-calc(16 0 0 40);
            width: rem-calc(64);
        }
    }
}
/// End of Tablet Up

/////
/// ----------------------------------------------------------------------------------------
/// @description - Desktop (1024px) viewport widths up to infinity
/// ----------------------------------------------------------------------------------------
////
@media (min-width: $desktop) {
}
/// End of Desktop Up

/////
/// ----------------------------------------------------------------------------------------
/// @description - Full HD (1366px) viewport widths up to infinity
/// ----------------------------------------------------------------------------------------
////
@media (min-width: $fullhd) {
    .logo-container {
        &:after {
            clip-path: polygon(5.6875rem 1.5rem, 0 11.375rem, 22.75rem 11.375rem);
            height: rem-calc(182);
            width: rem-calc(380);
        }

        .logo {
            height: rem-calc(70);
            width: rem-calc(88);
        }
    }
}
/// End of FullHD Up