@import "@angular/material/prebuilt-themes/indigo-pink.css";
@import url('https://fonts.googleapis.com/css?family=Roboto');
@import url('https://fonts.googleapis.com/css?family=Roboto+Mono');

* {
  margin: 0;
  padding: 0;
  font-family: 'Roboto', sans-serif;
}

h1, h2, h3, h4 {
  padding: 16px 0;
}

h1, h2, h3, h4, h5, h6, p, li, ul, ol, td, th, table {
  color: #333333;
}

.recommendations>*>div {
  margin-bottom: 16px;
  line-height: 1.75;
}

a {
  color: #3f51b5;
}

a:hover {
  color: #283593;
}

.page {
  padding: 16px;
  max-width: 750px;
  margin: 0 auto;
  font-size: 16px;
}

.wizard > div {
  margin: 16px 0;
}

.recommendations mat-checkbox {
  float: left;
}

mat-form-field.mat-form-field-appearance-outline .mat-form-field-wrapper {
  margin-right: 1em;
}

mat-toolbar .page-title {
  overflow: hidden;
  text-overflow: ellipsis;
}

code {
  font-size: 14px;
  line-height: 1.5;
  padding: 0 6px;
  background-color: #CFD8DC;
  border-radius: 3px;
  font-family: 'Roboto Mono', monospace;
  display: inline-block;
}

/**
 * The code adds a copy button for the code element on hover.
 *
 * Since the code is generated by a markdown parser, we can't
 * just add a directive and have to do this instead.
 */

/** After element uses a mask to allow for the icon color change */
code:hover:after,
  /** Before element is only needed for the background */
code:hover:before {
  background: rgba(255, 255, 255, 0.9);
  content: "";
  display: block;
  height: 24px;
  position: absolute;
  right: -24px;
  top: 0;
  width: 24px;
}

code:hover:after {
  background: rgba(0, 0, 0, 0.5) no-repeat;
  /* This is a material `content_copy` icon
   *  https://material.io/resources/icons/?search=copy&icon=content_copy&style=baseline
   */
  mask-image: url("assets/content_copy-24px.svg");
  mask-position: 4px 2px;
  mask-repeat: no-repeat;
  mask-size: 16px;
}

code:hover:active:after {
  background-color: rgba(0, 0, 0, 0.6)
}

code:hover {
  background-color: #B0BEC5;
  cursor: pointer;
  position: relative;
}
