/**
** Aside
** Used to display "facts box" or secondary column for older articles (using --float modifier).
**/

.c-aside {
  position: relative;
  margin: $spacing--large 0;
  @include inuit-font-size(16px);
  z-index: 1;

  @include mq(tablet) {
    @include float(3, 4, 'right');
    max-width: 350px;
  }

  border-left: 4px solid $background-color--dark;

  &--wideScreen {
    display: none;
    @include mq(tablet) {
      display: block;
    }
  }

  &--narrowScreen {
    @include mq(tablet) {
      display: none;
    }
  }
}

.c-aside__content {
  color: $brand-grey-dark;
  padding: $spacing;

  & > *:first-child {
    margin-top: 0;
  }
  & > *:last-child {
    margin-bottom: 0;
  }
}

.c-aside img {
  box-shadow: 0px 0px 9px -3px $brand-grey;
}

.c-aside figure {
  // Overrule default images width
  width: 100% !important;
  left: 0 !important;
  padding: 0;
}

.c-aside h1 {
  margin-top: 0;
  margin-bottom: $spacing;
  @include inuit-font-size(22px, 34px);
  font-weight: $font-weight-bold;
  position: relative;
  z-index: 2;
}

.c-aside h2,
.c-aside h3,
.c-aside h4,
.c-aside h5 {
  display: block;
  @include inuit-font-size(16px);
  letter-spacing: 0.1em;
  margin-top: $spacing;
  margin-bottom: $spacing--small;
}

.c-aside__content > ul:not([class]),
.c-aside__content :not(li) > ul:not([class]) {
  @include mq(desktop) {
    margin-left: $spacing;
  }
}

.c-aside__content > ol:not([class]),
.c-aside__content :not(li) > ol:not([class]),
.c-aside__content .ol-list--roman {
  @include mq(desktop) {
    margin-left: $spacing--large;
  }
}