/* Header Layout: Left
----------------------------------------------- */

.layout--left {
  @include desktop-lg() {
    .sticky-wrapper {
      position: fixed;
      z-index: 999;
      width: 100%;
      top: 0;

      .stuck {
        position: fixed;
      }
    }
  }
}

.header {

    &--left {
        .header__main {
            max-width: none;
        }

        .header__menu-toggle {
            left: -15px;
            @include desktop() {
              display: flex;
            }

            @include desktop-lg() {
              display: none;
            }
        }

        @include desktop-lg() {
            position: fixed;
            top: 0;
            left: 0;
            width: $header-left-width;
            height: 100vh;
            box-shadow: 2px 2px 6px -4px $black;
            z-index: 1000;
            display: block;

            .header__flex {
                flex-direction: column;
                height: 100vh;
            }

            .header__nav {
                flex: 1;
            }

            .header__branding,
            .header__utility {
                flex: 0;
            }
        }

        .header__branding {
            text-align: left;

            @include desktop() {
              padding: 8px 0;
              flex: 1 auto;
            }

            @include desktop-lg() {
                padding: 15px 0;
                flex: none;

                img {
                    max-height: none;
                    max-width: 90%;
                    height: auto;
                }

                &-title {
                  top: 0;
                  transform: none;
                }
            }
        }

        .header__nav {
            margin-bottom: 30px;
            display: none;
            @include desktop-lg() {
                display: block;
            }

            .menu-item-has-children {
                display: flex;
                flex-flow: row wrap;
                align-items: stretch;

                & > a {
                    flex: 1;
                    background: none;

                    &:after {
                        display: none;
                    }
                }

                &:hover {

                    .sub-menu {
                        margin: 0;
                    }
                }
            }

            .menu-item--btn {

                &-primary,
                &-outline {
                    margin: 5px 15px;
                    text-align: center;
                }
            }

            .sub-menu {
                flex: 0 100%;
                width: 100%;
                display: none;
                position: relative;
                left: 0;
                top: 0;
                right: 0;
                visibility: visible;
                opacity: 1;
                text-align: left;
                border: none;
                margin: 0;
                min-width: 100%;
                transition: none;
                padding: 0 0 0 15px;

                &:before,
                &:after {
                    display: none;
                }

                li {
                    border: none;

                    .sub-menu {
                        left: 0;
                        padding-left: 15px;
                        top: 0;
                    }
                }

                &--toggle {
                    width: 50px;
                    cursor: pointer;
                    background: url("<svg version='1.1' xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 20 20'><path fill='#9B9B9B' d='M17.418 6.109c0.272-0.268 0.709-0.268 0.979 0s0.271 0.701 0 0.969l-7.908 7.83c-0.27 0.268-0.707 0.268-0.979 0l-7.908-7.83c-0.27-0.268-0.27-0.701 0-0.969s0.709-0.268 0.979 0l7.419 7.141 7.418-7.141z'></path></svg>") no-repeat center center;

                    &.active,
                    &:hover {
                        background-color: $seashell;
                    }

                    &.active {
                        transform: rotate(180deg);
                    }
                }
            }
        }

        .header__utility {
            display: none;
            text-align: left;
            margin: 0 -15px;

            @include desktop-lg() {
                display: block;
            }

            li {
                display: block;
            }

            a {
                display: block;
                padding: 12px 15px;
            }

            .container {
                padding: 0;
            }

            &--two {
                .header__utility--left,
                .header__utility--right {
                    display: block;
                    width: 100%;
                }
            }
        }

        .header__call {
          @include desktop-lg() {
            margin: 0 -15px;
          }

          &-icon {
            height: 15px;
            width: 15px;
          }

          &-number {
            font-size: 1rem;
          }
        }

        @media screen and (max-width: 1199px) {
            .header__flex {
                & >.search-form {
                    display: none !important;
                }
            }
        }
    }
}
