/* ==========================================================================
   Config
   ========================================================================== */
$guideline-bg-colour: $neutral-lightest !default;
$guideline-spacing: $layout-spacing-base !default;
$guideline-title-size: $typo-size-large !default;

/* ==========================================================================
   Styles
   ========================================================================== */
.gui-guideline {
  padding: $guideline-spacing;
  margin: 0 0 $guideline-spacing*2;
  border-radius: 4px;
}

.gui-guideline__head {
  display: flex;
  align-items: center;
}

.gui-guideline__button {
  margin-left: auto;
}

.gui-guideline__title {
  margin: 0;
  font-size: $guideline-title-size;
}

.gui-guideline__body {
  transition: max-height $animation-time-micro ease-out;
  max-height: 0;
  font-size: $typo-size-lead;
  line-height: $typo-line-height-base * 1.2;
  overflow: hidden;

  > *:last-child,
  > *:last-child > *:last-child {
    margin-bottom: 0;
  }
}

.gui-guideline.gui-is-active {
  .gui-guideline__body {
    max-height: 100%;
    overflow-y: auto;
  }
}