/*
 * Rules that lived in Angular component stylesheets, plus the styles for the
 * contact dialog and toast that replace the Angular Material versions.
 */

/* from components/wave/wave.component.scss */
.fit-parent {
  left: 0px;
  right: 0px;
  vertical-align: bottom;
}

/* from components/section/section.component.scss */
.width-350 {
  width: 350px !important;
}

/* from presentation/layout/menu-bar/menu-bar.component.scss */
.dropdown-toggle::after {
  content: none;
}

.ml-21px {
  margin-left: 21px !important;
}

/* The wave canvas is appended by three.js and sizes itself to its container. */
#wave-anim-container canvas {
  display: block;
}

/* ---------------------------------------------------------- contact dialog */

.contact-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1040;
  background: rgba(0, 0, 0, 0.32);
}

.contact-dialog {
  position: fixed;
  inset: 0;
  z-index: 1050;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  overflow-y: auto;
}

/* The display above would otherwise beat the [hidden] default. */
.contact-dialog[hidden] {
  display: none;
}

.contact-dialog-panel {
  width: 100%;
  max-width: 400px;
  background: #fff;
  border-radius: 4px;
  box-shadow: 0 11px 15px -7px rgba(0, 0, 0, 0.2), 0 24px 38px 3px rgba(0, 0, 0, 0.14),
    0 9px 46px 8px rgba(0, 0, 0, 0.12);
}

.contact-dialog-panel .float-right {
  float: right;
}

.contact-dialog-panel .pt-10 {
  padding-top: 10px;
}

.contact-dialog-panel .py-30 {
  padding-top: 30px;
  padding-bottom: 30px;
}

.contact-dialog-panel .px-30 {
  padding-left: 30px;
  padding-right: 30px;
}

body.contact-open {
  overflow: hidden;
}

/* ----------------------------------------------------------- cookie notice */

/*
 * The palette cookieconsent used to inject at runtime, from the app config:
 * popup #ffffff on #194755 text, button #194755 with white text. The hover
 * colour is the library's own lightened value for that background.
 */
.cc-window.cc-color-override {
  color: #194755;
  background-color: #ffffff;
}

.cc-color-override .cc-btn {
  color: #ffffff;
  border-color: transparent;
  background-color: #194755;
}

.cc-color-override .cc-btn:hover,
.cc-color-override .cc-btn:focus {
  background-color: #3f6d7b;
}

/* cookieconsent.css sets display:flex, which would otherwise beat [hidden]. */
.cc-window[hidden] {
  display: none;
}

/* ------------------------------------------------------------------- toast */

.site-toast {
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%);
  z-index: 1060;
  max-width: min(90vw, 480px);
  padding: 14px 16px;
  border-radius: 4px;
  background: #333;
  color: #fff;
  font-size: 14px;
  box-shadow: 0 3px 5px -1px rgba(0, 0, 0, 0.2), 0 6px 10px 0 rgba(0, 0, 0, 0.14);
}