/**
* UpUp Alert Bar
*
* Generic Styles for the alert bar
* Let a theme impart more styles
* Handling some basic responsive behavior here - assuming bootstrap breakpoints
*/

.upup-alert-bar {
  padding-bottom: 1rem;
  background: #eee;
}

.upup-alert-bar.hidden,
.upup-alert-bar.dismissed {
  display: none;
}

.upup-alert-bar__inner {
  display: flex;
  margin: 0 -0.5rem;
  flex-wrap: wrap;
}

.upup-alert-bar__content-column {
  margin: 0 0.5rem;
  flex-basis: 100%;
}

.upup-alert-bar__cta-column {
  margin: 0 0.5rem;
  flex-basis: 100%;
}

/* Mobile dismiss bar */
.upup-alert-bar__dismiss-bar {
  display: block;
  background: #ddd;
  margin-bottom: 1rem;
}

/* Dismiss button */
.upup-alert-bar__dismiss {
  padding: 1rem;
  border: none;
  -webkit-appearance: none;
  background: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

.upup-alert-bar__dismiss--desktop {
  display: none;
}

/* small close "x" icon to hide the window */
.upup-alert-bar__dismiss-close {
  display: block;
  width: 20px;
  height: 20px;
  position: relative;
}

.upup-alert-bar__dismiss-close:before,
.upup-alert-bar__dismiss-close:after {
  content: "";
  display: block;
  width: 2px;
  height: 100%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform-origin: center center;
  transform: translate(-50%, -50%) rotate(45deg);
  background: #000;
}

.upup-alert-bar__dismiss-close:after {
  transform: translate(-50%, -50%) rotate(-45deg);
}

/* Desktop styles */
@media screen and (min-width: 992px) {
  .upup-alert-bar {
    padding: 1rem 0;
  }

  .upup-alert-bar__inner {
    flex-wrap: nowrap;
  }

  .upup-alert-bar__content-column {
    flex-basis: 70%;
  }

  .upup-alert-bar__content p:last-of-type {
    margin-bottom: 0;
  }

  .upup-alert-bar__cta-column {
    flex-basis: 30%;
  }

  .upup-alert-bar__dismiss-bar {
    display: none;
  }

  .upup-alert-bar__dismiss {
    padding: 1rem 0;
    width: auto;
    justify-content: flex-start;
  }

  .upup-alert-bar__dismiss-close {
    margin-right: 0.5rem;
  }

  .upup-alert-bar__dismiss--desktop {
    display: flex;
    margin-top: -1rem;
  }
}

/* Header adjustments for navbar */
.site-header.alert-bar {
  position: absolute;
}

.sticky {
  position: fixed;
}