.mega-menu__trigger {
  appearance: none;
  border: none;
  background: transparent;
  border-radius: 0;
  display: flex;
  gap: var(--dcc-spacing-100);
  align-items: center;
}

.mega-menu__trigger__icon {
  display: block;
  width: 1rem;
  height: 1rem;
  pointer-events: none;
}

.mega-menu__trigger[aria-expanded="true"] .mega-menu__trigger__icon--open,
.mega-menu__trigger[aria-expanded="false"] .mega-menu__trigger__icon--close {
  display: none;
}

.mega-menu__trigger[aria-expanded="false"] .mega-menu__trigger__icon--open,
.mega-menu__trigger[aria-expanded="true"] .mega-menu__trigger__icon--close {
  display: block;
  transform: translateY(-2px);
}

.mega-menu__container {
  overflow: hidden;
  background: white;
  /**
   * Provide background colors for grid-cells at large sizes: the background
   * colors set on the panes won't quite handle it.
   */
  background: linear-gradient(
    90deg,
    var(--dcc-mega-menu-background) 0%,
    var(--dcc-mega-menu-background) calc(100% / 3),
    var(--dcc-mega-menu-topics-background) calc(100% / 3),
    var(--dcc-mega-menu-topics-background) 100%
  );
  height: calc(100vh - (var(--drupal-displace-offset-top, 0) + var(--js-dcc-megamenu-offset)));

  width: 100%;

  .js & {
    height: var(--js-dcc-megamenu-height);
    left: 0;
    position: absolute;
    right: 0;
    top: var(--js-dcc-megamenu-top);
    z-index: 100;

    &:not([data-disclosure-expanded]) {
      display: none;
    }
  }
}

.mega-menu__container--inner {
  max-width: var(--dcc-content-width-700);
  margin: 0 auto;
  overflow: scroll;
  height: 100%;
}

@media screen and (min-width: 48em) {
  .mega-menu__container--inner {
    display: grid;
    grid-template-columns: 1fr 2fr;
  }
}

.mega-menu__pane {
  box-sizing: border-box;
  padding: var(--dcc-spacing-400) var(--dcc-spacing-320);
}

@media screen and (min-width: 48em) {
  .mega-menu__pane {
    padding: var(--dcc-spacing-400);
  }
}

.mega-menu__pane__pane--quick-links {
  background: var(--dcc-mega-menu-background);
}

.mega-menu__pane__pane--topics {
  background: var(--dcc-mega-menu-topics-background);
  height: 100%;
}

@media screen and (min-width: 64em) {
  /**
   * We have to do this calculation to set the widths of the two panes so that
   * they can be centered together on screens wider than the panes themselves.
   */
  .mega-menu__container {
    --mm-pane-padding-inner: var(--dcc-spacing-400);
    --mm-pane-quick-links-width: calc(2.5 * var(--dcc-spacing-1000) + 2 * var(--mm-pane-padding-inner));
    --mm-pane-topics-max-width: calc(7.05 * var(--dcc-spacing-1000) + 2 * var(--mm-pane-padding-inner));
  }

  .mega-menu__container--inner {
    display: grid;
    grid-template-columns: auto auto;
  }

  .mega-menu__pane__pane--quick-links {
    justify-self: end;
    padding-inline: var(--mm-pane-padding-inner);
    width: var(--mm-pane-quick-links-width);
  }

  .mega-menu__pane__pane--topics {
    justify-self: start;
    padding-inline: var(--mm-pane-padding-inner);
    max-width: var(--mm-pane-topics-max-width);
  }
}

.mega-menu__container[data-disclosure-expanded="true"] {
  max-height: 100vh;
  transition: max-height 600ms ease-in;
}

.mega-menu__container[data-disclosure-expanded="true"] .mega-menu__container--inner {
  visibility: visible;
}

.no-js .mega-menu__container,
.mega-menu__container[data-disclosure-expanded="false"] {
  max-height: 0;
  transition: max-height 300ms ease-out;
}

.mega-menu__container[data-disclosure-expanded="false"] .mega-menu__container--inner {
  visibility: hidden;
}

.mega-menu__pane__title {
  font-size: var(--dcc-font-size-75);
  margin-bottom: var(--dcc-spacing-300);
}

.mega-menu__container .menu {
  list-style: none;
  margin: 0;
  padding: 0;
}

@media screen and (min-width: 48em) {
  .mega-menu__pane__title {
    font-size: var(--dcc-font-size-100);
  }

  .mega-menu__pane__pane--quick-links .mega-menu__pane__title {
    margin-bottom: var(--dcc-spacing-200);
  }

  .mega-menu__pane__pane--topics .mega-menu__pane__title {
    margin-bottom: var(--dcc-spacing-100);
  }
}

@media screen and (min-width: 64em) {
  .mega-menu__pane__title {
    font-size: var(--dcc-font-size-200);
  }
}

/* Quick Links */
@media screen and (min-width: 48em) {
  .mega-menu__container .quick-links {
    max-width: var(--dcc-mega-menu-quick-links-width);
  }
}

/* Topics */
.mega-menu__pane__pane--topics .menu {
  display: flex;
  flex-direction: column;
  column-gap: var(--dcc-spacing-300);
}

@media screen and (min-width: 64em) {
  .mega-menu__pane__pane--topics .menu {
    display: grid;
    align-items: center;
    grid-template-columns: 1fr 1fr;
  }
}

/* Body behaviour */
/* Prevent body scroll while the menu is open, and make sure Cookiebot doesn't
* taunt keyboard users with an unreachable link. */
body.megamenu-open {
  overflow: hidden;

  #CookiebotWidget {
    z-index: -1;
  }
}

/* Language switcher shows in megamenu on small screens only */
.mega-menu__container .links.language-switcher-language-url {
  align-items: center;
  background: white;
  border-top: 1px solid var(--dcc-mega-menu-topics-background);
  border-bottom: 1px solid var(--dcc-mega-menu-topics-background);
  justify-content: right;
  padding: var(--dcc-spacing-100) var(--dcc-spacing-200);
}

@media screen and (min-width: 40em) {
  .mega-menu__container .links.language-switcher-language-url {
    display: none;
  }
}

/* Base card overrides */

.mega-menu__container .base-card {
  background: transparent;
}

.mega-menu__container .base-card__title > a {
  font-weight: var(--dcc-font-weight-regular);

  &:hover {
    color: var(--dcc-pa)
  }
}

.mega-menu__pane__pane--quick-links .base-card__arrow > svg path {
  fill: var(--dcc-mega-menu-links-color);
}

.mega-menu__pane__pane--topics .base-card {
  border-bottom: 2px solid var(--dcc-pallete-digital-blue);
  a {
    font-size: var(--dcc-font-size-200);
  }
}