@charset "UTF-8";
@import "settings";
@import "components/button";

.pat-notification-panel {
  padding: 0.5em;
  margin-bottom: 1em;
  //Instead of the line below you could use @includebox-shadow($shadow-1, $shadow-2, $shadow-3, $shadow-4, $shadow-5, $shadow-6, $shadow-7, $shadow-8, $shadow-9, $shadow-10)
  box-shadow: 0 1px 0.2em rgba(0,0,0,0.6);
  display: block;
  //Instead of the line below you could use @includeborder-radius($radius, $vertical-radius)
  border-radius: 0.2em;
  background-color: rgba(254,255,255,0.98);
  color: #6f5a44;
  // border: 1px solid white;

	button {
		@include pat-button();
	}

  a {
    text-decoration: underline;
  }
  &.notice {
    background-color: $colour-notice;
  }
  &.success {
    background-color: $colour-success;
    color: darken($colour-success, 50%);
    * {
      color: darken($colour-success, 50%) !important;
      //Instead of the line below you could use @includetext-shadow($shadow-1, $shadow-2, $shadow-3, $shadow-4, $shadow-5, $shadow-6, $shadow-7, $shadow-8, $shadow-9, $shadow-10)
    }
  }
  &.warning {
    background-color: $colour-warning;
    color: white;
    * {
      color: white !important;
    }
  }
  &.error {
    background-color: $colour-error;
    color: white;
    * {
      color: white !important;
    }
  }
  &.info {
    background-color: $colour-info;
    color: #247fad;
  }
  p:last-of-type {
    margin-bottom: 10px;
  }
}
#pat-notification-banners {
  position: fixed;
  top: 15px;
  width: 380px;
  z-index: 2147483647;
  right: 15px;
  .pat-notification-panel {
    padding-right: 108px;
  }
  .close-panel {
    position: absolute;
    top: 0.5em;
    right: 0.5em;
  }
  button {
    // margin: 0 0 8px;
    // width: 90px;
  }
}
