@use "sass:math";

.PdEmhn {
  $hamburger-layer-width: 20px;
  $hamburger-layer-height: 1px;
  $hamburger-layer-spacing: 4px;

  html.mobile-menu-default-active,
  html.mobile-menu-cta-active {
    @include media-max($large) {
      overflow-y: hidden;
    }
  }

  .site-header {
    background-color: #000;
    transition: transform var(--header-transition-speed) ease-in-out;

    &__hello-bar {
      display: none;
      background-color: #dc150b;
      padding: 6px 16px;
      text-align: center;
      transition: all var(--default-transition-params);
      cursor: pointer;
      &.active {
        display: block;
      }
      &-inner {
        color: #fff;
        text-decoration: none;
        font-size: 16px;
        .button-link {
          padding-left: 8px;
        }
      }
      &-close {
        position: absolute;
        right: 0;
        width: 20px;
        height: 20px;
        cursor: pointer;
      }
      &:hover {
        background-color: #87120c;
        .button-link {
          &:after {
            background-color: #fff;
            border-radius: 50%;
            color: #000;
            transform: rotate(45deg);
          }
        }
      }

      &.red {
        background-color: #dc150b;
        a,
        .button-link {
          color: #fff;
        }
        &:hover {
          background-color: #87120c;
        }
      }
      &.violet {
        background-color: #9e4ec4;
        a,
        .button-link {
          color: #fff;
        }
        &:hover {
          background-color: #5d137d;
        }
      }
      &.blue {
        background-color: #2c80ce;

        &:hover {
          background-color: #10487b;
        }
      }
      &.green {
        background-color: #1aa8a8;
        &:hover {
          background-color: #0f5353;
        }
      }
      &.blue,
      &.green {
        a,
        .button-link {
          color: #000;
        }
        &:hover {
          a,
          .button-link {
            color: #fff;
          }
        }
      }
    }

    &__bg-bar {
      height: 4px;
      background: linear-gradient(
        90deg,
        #0cb1f2 -0.01%,
        #12c0c5 13.53%,
        #256cd4 28.11%,
        #15a1e6 40.61%,
        #0ca6f2 64.05%,
        #01ecb0 91.53%,
        #0cf06e 99.98%
      );
    }

    &-wrapper {
      z-index: var(--z-header);
      position: sticky;
      top: var(--admin-bar-height, 0);
      left: 0;
      width: 100%;
    }

    display: flex;
    align-items: center;
    padding: 12px 0;
    @include media-min($large) {
      padding: 18px 0;
    }

    &__inner {
      position: relative;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }

    &__logo-image {
      width: 92px;
      height: 38px;
      display: block;
      @include media-min($large) {
        width: 120px;
        height: 50px;
      }
    }

    &__cta-container {
      display: none;

      @include media-min($large) {
        display: flex;
        align-items: center;
      }
    }

    &__menu-primary {
      display: none;

      @include media-min($large) {
        display: flex;
        gap: 28px;
        flex-grow: 1;
      }
    }

    &__primary-menu-link {
      position: relative;
      font-weight: 400;
      font-size: 15px;
      line-height: 21px;
      color: var(--color-white);
      text-decoration: none;
      transition: all var(--default-transition-params);
      &:hover {
        color: #a2adb9;
      }
    }

    &__secondary-menu-link {
      font-size: 15px;
      line-height: 21px;
      color: var(--color-white);
      text-decoration: none;
      margin-right: 24px;
      &:hover {
        color: #a2adb9;
      }
    }

    &__dropdown-menu-container {
      display: flex;
      align-items: center;
      height: 100%;

      .site-header__primary-menu-link,
      .site-header__cta-button {
        position: relative;

        // NOTE: this pseudo-element will help the dropdown menu to stay open
        // during diagonal mouse movement since it creates a temporary buffer
        // area for the hover state during hover
        &::before {
          content: "";
          position: absolute;
          bottom: -90px;
          left: 50%;
          width: 120px;
          height: 120px;
          transform: translateX(-50%) rotate(45deg);
          pointer-events: none;
        }
      }

      &:not(.site-header__dropdown-menu-container--click-activate):hover,
      &.active {
        .site-header__dropdown-icon {
          color: var(--color-blue);
        }

        .site-header__primary-menu-link {
          color: #a2adb9;
        }

        .menu-dropdown {
          opacity: 1;
          pointer-events: all;
        }

        .site-header__primary-menu-link::before,
        .site-header__cta-button::before {
          pointer-events: all;
        }
      }

      &-relative {
        position: relative;
      }

      .menu-dropdown {
        position: absolute;
        top: 42px;
        left: 0;
        padding: 30px 30px 50px;
        transition: opacity var(--default-transition-params);

        opacity: 0;
        pointer-events: none;
      }
      .menu-dropdown-columns {
        padding: 0;
        left: 50%;
        border: 1px solid #424d57;
        transform: translatex(-50%);
        box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.16);
      }

      &:first-child {
        .menu-dropdown-columns {
          left: 0;
          transform: translatex(0);
        }
      }

      &:nth-child(2) {
        .menu-dropdown-columns {
          transform: translatex(-34%);
        }
      }
    }

    &__mobile-menu-button {
      display: flex;
      justify-content: center;
      align-items: center;
      cursor: pointer;

      // Normalize (<button>)
      font: inherit;
      color: inherit;
      text-transform: none;
      border: 0;
      margin: 0 0 0 15px;
      padding: 0;
      overflow: visible;
      min-width: 0;

      @include media-min($large) {
        display: none;
      }
    }

    &__mobile-menu-button-box {
      width: $hamburger-layer-width;
      height: $hamburger-layer-height * 3 + $hamburger-layer-spacing * 2;
      display: inline-block;
      position: relative;
    }

    &__mobile-menu-button-inner {
      display: block;
      top: 50%;
      margin-top: math.div($hamburger-layer-height, -2);

      transition-duration: 0.075s;
      transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);

      &,
      &::before,
      &::after {
        width: $hamburger-layer-width;
        height: $hamburger-layer-height;
        background-color: #fff;
        border-radius: 2.5px;
        position: absolute;
        transition-property: transform;
        transition-duration: 0.15s;
        transition-timing-function: ease;
      }

      &::before,
      &::after {
        content: "";
        display: block;
      }

      &::before {
        top: ($hamburger-layer-spacing + $hamburger-layer-height) * -1;
        transition:
          top 0.075s 0.12s ease,
          opacity 0.075s ease;
      }

      &::after {
        bottom: ($hamburger-layer-spacing + $hamburger-layer-height) * -1;
        transition:
          bottom 0.075s 0.12s ease,
          transform 0.075s cubic-bezier(0.55, 0.055, 0.675, 0.19);
      }

      html.mobile-menu-default-active &,
      html.mobile-menu-cta-active & {
        transform: rotate(45deg);
        transition-delay: 0.12s;
        transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);

        &::before {
          top: 0;
          opacity: 0;
          transition:
            top 0.075s ease,
            opacity 0.075s 0.12s ease;
        }

        &::after {
          bottom: 0;
          transform: rotate(-90deg);
          transition:
            bottom 0.075s ease,
            transform 0.075s 0.12s cubic-bezier(0.215, 0.61, 0.355, 1);
        }
      }
    }
  }
}