$header-height: 60px;

@mixin header() {
    width: 100%;
    height: $header-height;
    background-color: color('background');
    padding: 10px 0;
    @include backface-hack();

    &__wrapper {
        @include flex();
        @include align-items-center();
        @include justify-content-end();
        position: relative;
        height: calc(#{$header-height} - 20px);

        @include breakpoint(small) {
            padding: 0 14px;
        }
    }

    &__logo,
    &__breadcrumb,
    &__nav {
        @include inline-flex();
    }

    &__logo {
        width: 140px;
        height: 33px;
        background-image: url("../images/uniplaces_logo.svg");
        background-repeat: no-repeat;
        background-size: contain;
        z-index: 3;
        transition-duration: $animation-duration;
        transition-delay: #{$animation-duration + .3s};

        @include breakpoint(small) {
            margin-right: auto;
        }
    }

    &__breadcrumb {
        margin-left: 40px;
        opacity: 0.7;

        @include breakpoint(small) {
            display: none;
        }

        &__step,
        &__description {
            display: inline-table;
            font-size: em(15px);
        }

        &__step {
            @include font("IntervalNextMed");
        }
    }

    &__nav {
        margin-left: auto;

        @include breakpoint(small) {
            display: none;
        }

        &__button {
            @include button();
            min-width: initial;
            height: 38px;
            @include font("IntervalNextReg");
            font-size: em(15px);
            color: color('text', 'header');

            &--bordered {
                border: 1px solid color('text', 'header');

                &:hover,
                &:active,
                &--active {
                    border: 1px solid color('primary');
                }
            }

            &:hover,
            &:active {
                color: color('primary');
            }
        }

        &__dropdown &__button {
            position: relative;
            color: color('text', 'header');

            &:before,
            &:after {
                content: " ";
                position: absolute;
                display: block;
                width: 6px;
                height: 2px;
                top: calc(50% + 1px);
                right: 8px;
                background-color: color('text', 'header');
                transform: rotate(-45deg);
                will-change: transform;
            }

            &:after {
                right: 11px;
                transform: rotate(45deg);
            }

            &:hover,
            &:active {
                &:before,
                &:after {
                    background-color: color('primary');
                }
            }
        }

        &__dropdown {
            position: relative;

            &__list {
                position: absolute;
                display: none;
                width: 248px;
                padding: 16px 0;
                top: calc(100% + 11px);
                right: 8px;
                will-change: display;
                @include backface-hack();

                background-color: #fff;
                box-shadow: 0 16px 18px 0 rgba(31, 36, 50, 0.32);
                border: solid 1px #ccd2d4;
                border-radius: 2px;

                &:before,
                &:after {
                    content: " ";
                    position: absolute;
                    display: block;
                    width: 0;
                    height: 0;
                    top: -7px;
                    right: 16px;
                    z-index: 2;
                    border-bottom: 8px solid #fff;
                    border-left: 8px solid transparent;
                    border-right: 8px solid transparent;
                }

                &:after {
                    top: -8px;
                    z-index: 1;
                    border-bottom: 8px solid #ccd2d4;
                }

                &__item {
                    position: relative;
                    display: block;
                    width: 100%;
                    height: 32px;
                    line-height: 32px;
                    padding: 0 27px;

                    @include font("IntervalNextReg");
                    font-size: em(16px);
                    color: #545d69;

                    &:hover,
                    &--active {
                        cursor: pointer;
                        color: #00222f;

                        &:before {
                            content: " ";
                            position: absolute;
                            display: block;
                            left: 0;
                            top: 0;
                            width: 3px;
                            height: 100%;
                            background-color: color('primary');
                        }
                    }
                }
            }

            &--active &__list {
                display: block;
            }
        }

        &__dropdown--active &__button {
            color: color('primary');

            &:before,
            &:after {
                background-color: color('primary');
            }

            &:before {
                transform: rotate(45deg);
            }

            &:after {
                transform: rotate(-45deg);
            }
        }
    }

    &--transparent {
        background-color: transparent;
    }

    &--transparent &__logo {
        background-image: url("../images/uniplaces_logo_white.svg");
    }

    &--transparent &__logo {
        background-image: url("../images/uniplaces_logo_white.svg");
    }

    &--transparent &__nav__button {
        border-color: #fff;
        color: #fff;

        &:before,
        &:after {
            background-color: #fff;
        }

        &:hover {
            color: color('primary');
            border-color: color('primary');
        }
    }

    &--transparent &__nav__dropdown--active &__nav__button {
        color: color('primary');
        &:before,
        &:after {
            background-color: color('primary');
        }
    }

    &__mobile-button {
        position: relative;
        display: none;
        z-index: 3;
        @include font("IntervalNextReg");
        font-size: em(15px);
        text-transform: uppercase;

        svg {
            fill: #0083e4;
        }

        @include breakpoint(small) {
            display: block;
        }
    }

    &__mobile-cover {
        content: " ";
        position: fixed;
        display: block;
        width: 100%;
        top: 0;
        left: 0;
        z-index: 2;
        height: $header-height;
        background-color: color('background');
        transform: translate3d(0, -100%, 0);
        transition: transform $transition;
        transition-delay: #{$animation-duration*2};
    }

    &--active {
        position: fixed;
    }

    &--active &__mobile-cover {
        transform: translate3d(0, 0%, 0);
        transition-delay: 0s;
    }

    &__mobile-nav {
        @include flex();
        @include align-items-center();
        @include justify-content-center();
        position: fixed;
        top: $header-height;
        left: 0;
        z-index: 1;
        width: 100%;
        height: calc(100% - #{$header-height});
        padding: 30px 20px 20px;
        will-change: transform;
        transform: translate3d(0, -110%, 0);
        transition: transform $animation-duration linear;
        transition-delay: #{$animation-duration};
        overflow: hidden;
        overflow-y: scroll;

        background-color: color('background');

        @include breakpoint(small) {
            display: block;
        }

        &--active {
            transform: translate3d(0, 0%, 0);
            transition-delay: 0s;
        }

        &__button,
        &__separator {
            width: 100%;
            z-index: 1;
            opacity: 0;
            transition-delay: 0s;
        }

        &__button {
            display: table;
            padding: 12px 24px;
            font-size: em(16px);
            color: #253036;
        }

        &__separator {
            height: 1px;
            margin: 32px 0;
            background-color: color('primary', 'divider');
        }

        &__button--dropdown {
            position: relative;
            margin-bottom: 0;
            padding-bottom: 32px;

            &:before,
            &:after {
                content: " ";
                position: absolute;
                display: block;
                top: 36px;
                right: 0;
                width: 8px;
                height: 1px;
                background-color: color('feedback', 'text');
            }

            &:before {
                transform: rotate(-45deg);
            }

            &:after {
                right: 5px;
                transform: rotate(45deg);
            }

            &--active {
                &:before {
                    transform: rotate(45deg);
                }

                &:after {
                    transform: rotate(-45deg);
                }
            }
        }

        &__dropdown {
            width: 100%;
            height: 0;
            padding-top: 16px;
            overflow: hidden;
            will-change: height;
            transition: height $animation-duration $cubic-bezier;

            &--active {
                height: 100%;
                max-height: 300px;
            }

            a {
                display: block;
                width: 100%;
                padding: 7px 0;
                font-size: em(20px);
                text-align: left;
                text-decoration: none;
                color: inherit;

                &:active {
                    color: color('primary');
                }
            }

            a,
            button,
            [role="button"] {
                font-size: em(16px);
                color: #545d69;
            }
        }
    }

    &--active {
        background-color: color('background');
    }

    &--active &__logo {
        background-image: url("../images/uniplaces_logo.svg");
        transition-delay: 0s;
    }

    &--active &__mobile-nav {
        transition-delay: 0s;

        &__button,
        &__separator {
            opacity: 1;
        }
    }
}