///////////////////////////
// THEME / COMPONENTS / CTA
///////////////////////////


.unl .dcf-header-global .dcf-list-cta a,
.unl .dcf-header-global .dcf-list-cta a:visited {
  @include cream;
  @include txt-decor-none;
}


.unl .dcf-cta-nav {
  display: grid;
}


@include mq(md, max, width) {

  .unl .dcf-cta-header {
    display: none;
  }

}


@media (min-width: #{ms(24)}em) {

  .unl .dcf-cta-nav {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
  }

}



@include mq(md, min, width) {

  .unl .dcf-cta-nav {
    display: none;
  }


  .unl .dcf-cta-header {
    display: flex;
    flex-grow: 3;
  }


  // Add arrow above options popover and horizontally center under button text
  .dcf-btn-toggle-cta[aria-pressed="true"]::after {
    border-left: #{ms(-4)}em solid transparent;
    border-right: #{ms(-4)}em solid transparent;
    border-bottom: #{ms(-4)}em solid rgba(36,36,35,.95);
    bottom: -1px;
    content: '';
    display: block;
    @include h-2;
    left: 50%;
    position: absolute;
    transform: translateX(-50%);
    @include w-2;
  }


  .unl .dcf-list-cta {
    box-shadow: 0 1px 2px rgba(0,0,0,.5), 0 1px 10px rgba(0,0,0,.25);
    left: calc(#{ms(0)}em - #{ms(4)}em);
    min-width: #{ms(20)}em;
    top: 100%;
    z-index: 999; // Ensure that the popover has a higher z-index than the local navigation
  }


  .unl .dcf-list-cta a:hover {
    @include txt-decor-hover-on;
  }

}