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


@use "../variables/" as var;
@use "../mixins/" as mixins;


@include mixins.mq(md, max, width) {

  .unl .dcf-cta ul {
    grid-gap: var.$length-em-6 var.$length-vw-1;
  }


  .unl-cta-heading {
    font-size: var.$length-em-4;
    margin-left: 0 !important;
  }

}


@media (min-width: #{var.$ms24}em) {

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

}


@include mixins.mq(md, min, width) {

  .unl-cta-heading {
    font-size: var.$length-em-3;
    margin-bottom: var.$length-em-3;
    margin-left: #{var.$ms00}rem !important;
  }


  .unl .dcf-nav-dialog .dcf-cta > ul > li {
    opacity: 0;
    transform: translateY(-#{var.$ms-4}rem);
    transition: all .2s ease-in-out 0s;
  }


  .unl .dcf-nav-dialog.dcf-dialog-is-open .dcf-cta > ul > li {
    opacity: 1;
    transform: translateY(0);
    transition: all .05s ease-in-out;
  }


  @for $i from 0 through 6 {
    .unl .dcf-nav-dialog.dcf-dialog-is-open .dcf-cta > ul > li:nth-of-type(#{$i}) {
      transition-delay: calc(.2s + ($i * .05s));
    }
  }

}