/*--------------------------------------------------
    [Heeader Slide]
----------------------------------------------------*/

.header-slide {
    background: $color-white;
}

/* Logo */
.header-slide {
    .header-slide-logo-wrap {
        @include size(140px);
        float: left;
        max-height: 90px;
        line-height: 60px;
        @include cubic-transition($delay: 0, $duration: 400ms, $property: (all));

        .header-slide-logo {
            display: inline-block;
            padding: 15px 0;

            &:focus,
            &:hover {
                text-decoration: none;
            }
        }

        .header-slide-logo-img {
            display: inline-block;
            @include size(120px, auto);
            max-width: 100%;
            max-height: 100%;
            vertical-align: middle;
        }
    }
}

/* Actions */
.header-slide-actions {
    position: relative;
    float: right;
    padding: 35px 0;
}

/* Menu Trigger */
.header-slide {
    .header-slide-menu-trigger {
        display: inline-block;
        @include size(20px, 20px);

        .toggle-icon {
            @include position(absolute, $top: 50%, $right: 0);
            @include size(20px, 2px);
            background: $color-dark;
            margin-top: -1px;
            margin-left: -10px;
            @include cubic-transition($delay: 0, $duration: 300ms, $property: (all));

            &::before,
            &::after {
                position: absolute;
                @include size(100%);
                background: $color-dark;
                content: " ";
                @include translate3d(0,0,0);
                @include visibility-backface(hidden);
                @include cubic-transition($delay: 0, $duration: 300ms, $property: (all));
            }

            &::before {
                @include translate3d(0,-6px,0);
            }

            &::after {
                @include translate3d(0,6px,0);
            }
        }

        &.menu-is-visible {
            .toggle-icon {
                @include bg-opacity($color-dark, 0);
        
                &::before {
                    @include translate3d(0,0,0);
                    @include rotate(-45deg);
                }

                &::after {
                    @include translate3d(0,0,0);
                    @include rotate(45deg);
                }
            }
        }
    }
}

/* Menu */
.header-slide {
    .header-slide-menu {
        border-bottom: 1px solid lighten($color-subtitle, 55%);
    }
}

/* Nav */
.header-slide {
    .header-slide-nav {
        text-align: center;
        background: $color-white;
        list-style: none;
        padding:  0;
        margin-bottom: 0;

        .header-slide-nav-item {
            display: inline-block;
            padding: 20px;
        }

        .header-slide-nav-link {
            @include font($size: $font-size-20, $weight: $font-weight-100);
            color: $color-dark;
            text-decoration: none;

            &:hover {
                color: $color-base;
            }
        }
    }
}

/* Subnav */
.header-slide-subnav {
    @include position(absolute, $left: 50%);
    text-align: center;
    line-height: 84px;
    background: $color-white;
    list-style: none;
    padding-left: 0;
    margin-bottom: 0;
    @include translate3d(-50%,0,0);

    .header-slide-subnav-item {
        display: inline-block;
        padding: 5px 2px;
    }

    .header-slide-subnav-link {
        @include font($size: $font-size-13, $weight: $font-weight-500);
        background: transparent;
        border-radius: 50px;
        text-transform: uppercase;
        padding: 7px 13px;
        text-decoration: none;
        @include cubic-transition($delay: 0, $duration: 200ms, $property: (all));

        &.active {
            color: $color-white;
            background: $color-base;

            &:hover {
                color: $color-white;
                background: $color-base;
            }
        }

        &:hover {
            color: $color-base;
            @include cubic-transition($delay: 0, $duration: 200ms, $property: (all));   
        }
    }
}