//////////////////////////////
// THEME / COMPONENTS / UNLALERT
//////////////////////////////


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

#unlalert {
  // Avoid flash of unstyled content, JS initially positions this off screen
  background-color: var.$yellow;
  margin-bottom: -3px; // Position on top of 3px scarlet border at top of header
  position: relative !important;
  top: auto !important;
}


#unlalert,
#unlalert a,
#unlalert_toggle,
.unlalert-heading {
  color: var.$darker-gray;
}


.unlalert-headline,
#unlalert_toggle:focus,
#unlalert_toggle:hover {
  color: var.$darkest-gray;
}


#unlalert.show {
  @include mixins.pb-6;
  @include mixins.pt-6;
}


#unlalert_toggle {
  margin-left: -1.33em;
}


#unlalert_toggle:focus,
#unlalert_toggle:hover {
  box-shadow: 0 1px 0.42em rgba(254,253,250,.4);
}


#unlalert.show #unlalert_toggle {
  margin-left: 0;
  position: absolute;
  right: .75em;
  top: .56em;
  z-index: 1;
}


#unlalert_content {
  display: none;
}


#unlalert.show #unlalert_content {
  display: block;
}


.unlalert-info {
  @include mixins.mb-6;
}


.unlalert-datetime {
  @include mixins.mb-5;
}


@supports (display: grid) {

  #unlalert.show #unlalert_content {
    display: grid;
  }


  .unlalert-info,
  .unlalert-datetime {
    margin-bottom: 0;
  }


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

    .unlalert-meta {
      grid-template-columns: 1fr 2fr;
    }

  }

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

    #unlalert.show #unlalert_content {
      grid-template-columns: 2fr 1fr;
    }


    .unlalert-meta {
      grid-template-rows: auto 1fr;
    }

  }

}