/* Header Layout: Overlay
----------------------------------------------- */

.layout--overlay {
    .sticky-wrapper {
      height: auto !important;
    }
}

.header {
    &--overlay {
        position: absolute;
        left: 0;
        width: 100%;
        z-index: 99;
        transition: background 250ms ease;

        &:not(.stuck) {
          background-color: transparent !important;
        }

        .header__flex {
            align-items: center;
        }

        .header__menu-toggle {
            display: flex;

            .hamburger {
                padding: 15px;
            }
        }

        .header__branding {
            flex: 1 auto;
            text-align: left;
            padding-top: 15px;

            @include mobile() {
                padding: 15px 15px 0;
            }
        }

        .header__call {
            padding: 15px;

            &-open {
              border-radius: 50%;
              padding: 12px;
              margin-right: 0px;
            }

            @include desktop-lg() {
              border-radius: 50px;
              margin-top: 5px;
              padding: 10px 25px;
              &:first-of-type {
                margin-top: 10px;
              }
            }

            &-group {
              margin-bottom: 10px;
              @include desktop-lg() {
                &:not(.active) {
                  background-color: transparent;
                }
              }
            }

            .icon {
                width: 28px;
                height: 28px;
            }
        }
    }
}
