/* ALERT APP ------------------------------ */

#alertApp,
#alertDesc {
  transition: var(--ws-transition);
}

#alertApp {
  background: var(--ws-green);
  border-bottom: 2px solid #FFF;
  cursor: pointer;
  position: relative;
  padding: .3125rem var(--ws-gap);
  width: 100%;
}

#alertApp.alertStatic {
  cursor: default;
}

#alertApp #alertTitle {
  color: #FFF;
  display: block;
  font-size: clamp(1em, 0.955em + 0.23vw, 1.125em);
  line-height: 1.2;
  margin: 0 auto;
  padding: .1875em .3125em;
  text-align: center;
}

#alertApp #alertDesc {
  height: 0;
  overflow: hidden;
}

#alertApp p {
  color: #FFF;
  font-size: 1em;
  line-height: 1.5;
  margin: 0;
  padding: .5rem 0 .75rem;
  position: relative;
  text-align: center;
}



/* DESKTOP ONLY ----- */

/* 750px */
@media (min-width: 46.875em) {
  #alertApp:not(.alertStatic):is(:hover, :focus-visible) {
    background: var(--ws-dk-blue);
  }

  #alertApp:is(:hover, .expand) #alertTitle {
    color: #FFF;
  }
}