// ------------------------------------\
// ARTICLE
// ------------------------------------/

// List in textarticle
.a-article-right-off {
  @include media-breakpoint-up( md ) {
    float: right;
    max-width: 65%;
    margin-left: 24px;
  }
  @include media-breakpoint-up( lg ) {
    max-width: 75%;
    margin-right: -192px;
  }
}

// Search on top of article
.a-articleSearch {
  margin-bottom:  $spacer * 2;

  @include media-breakpoint-up( lg ) {
    margin-bottom:  $spacer * 5;
  }
}

// Content in article
.a-text {
  @extend .a-fontSizeS;

  > h1,
  > h2,
  > h3,
  > h4 {
    margin: $spacer * 2 0 $spacer 0;

    @include media-breakpoint-up( md ) {
      margin: $spacer * 2 0 $spacer 0;
    }
    @include media-breakpoint-up( lg ) {
      margin: $spacer * 3 0 $spacer 0;
    }
  }

  > h3,
  > h4 {
    margin: $spacer * 2 0 $spacer * 0.5 0;
  }

  > h2 + h3 {
    margin-top: 12px !important;
  }

  > a {
    @extend .a-fontSizeS;
  }

  p,
  li {
    @extend .a-fontSizeS;

    > a {
      border-width: 1px;
    }

    strong,
    b {
      > a {
        border-width: 2px;
      }
    }
  }

  p {
    a {
      position: relative;
      z-index: 1;

      // Touch friendy link area
      &::before {
        position: absolute;
        top: -16px;
        left: -$spacer;
        z-index: -1;
        width: calc( 100% + 24px );
        min-height: $spacer * 4;
        cursor: pointer;
        content: '';
      }
    }
  }

  ul,
  &.a-bullet-list {
    &:not(.connected-bullets) {
      &:not(.no-decoration) {
        &:not(.a-list) {
          @extend .a-bullet-list;
        }
      }
    }
  }

  ol,
  .a-circle-list {
    @extend .a-fontSizeS;
    margin: 0 0 36px 0;

    @include media-breakpoint-up( lg ) {
      margin-left: -42px;
    }

    li {
      padding-left: 42px;
      margin-bottom: $spacer * 1.5;

      &::before {
        @include a-fontBold;
        position: relative;
        top: 0;
        padding: 5px 9px 4px 9px;
        margin-right: 15px;
        margin-left: -46px;
        content: counter( step );
        counter-increment: step;
        border: 2px solid $blue;
        border-radius: 50%;
      }

      ul {
        li {
          padding: 0;
          margin-left: 24px;

          &::before {
            padding: 0;
            margin-right: 0;
            margin-left: 0;
            counter-increment: none;
            border: none;
  				}
  			}
  		}
    }
  }

  .a-question-wrapper {
    .a-circle-list {
      margin-left: 0;

      @include media-breakpoint-up( lg ) {
        margin-left: 0;
      }

      li {
        padding-left: $spacer * 6;
        margin-bottom: 0;

        @include media-breakpoint-up( md ) {
          padding-left: $spacer * 7;
        }

        &::before {
          position: absolute;
          top: $spacer * 1.5;
          left: $spacer * 6;
          width: $spacer * 3;
          height: $spacer * 3;

          padding: 5px 0 0 0;
          text-align: center;

          @include media-breakpoint-up( md ) {
            top: $spacer * 2.5;
            left: $spacer * 7;
          }
        }

        &:last-of-type {
          display: none;
          padding: 0;
          margin-bottom: 0;

          &::before {
            display: none;
          }
        }
      }
    }
  }

  ul {
    &.a-iconList {
      li {
        margin-bottom: $spacer * 1.5;
      }
    }

    &.connected-bullets {
      margin-left: 0;

      li {
        padding-left: 36px;
        margin: 0;

        @include media-breakpoint-up( md ) {
          padding-left: 0;
        }
      }
    }
  }

  ul,
  ol {

    &.no-decoration {
      margin: 0;
      list-style-type: none;
    }

    &.a-list {
      margin: 0;
      list-style: none;

      li {
        margin: 0;
      }
    }
  }

  // Lists inside collapse content
  &.a-collapseContent {
    ul {
      margin-bottom: $spacer * 1.5;
      margin-left: 0 !important;
    }

    ol {
      margin-top: $spacer * 2;
      margin-left: $spacer * 3;
    }
  }

  // List inside article
  .a-list-container {
    max-width: 500px;
  }
}

// Image in articlelist
.a-articleImage-right {
  @include media-breakpoint-up( lg ) {
    float: right;
    max-width: 56%;
    padding: 6px 0 24px 24px;
    margin-right: -190px;
  }
}

.a-articleImage-left {
  float: left;
  max-width: 56%;
  padding: 6px 24px 24px 0;
  margin-left: -96px;
}

// Box
.a-box {
  @include media-breakpoint-up( sm ) {
    width: 100%;
    padding: $spacer * 4 $spacer * 4;
    margin-left: auto;
  }
  @include media-breakpoint-up( md ) {
    padding: $spacer * 4 $spacer * 7;
  }

  float: left;
  width: calc( 100% + 48px );
  padding: $spacer * 2 $spacer * 2;
  margin-left: -24px;
  background: $white;
  border: 12px solid $blue-light;

  .a-box-heading {
    float: left;
    padding-bottom: $spacer * 2;
  }

  .a-box-body {
    float: left;
  }

  .a-box-footer {
    float: left;
    padding-top: $spacer;
  }

  &.a-article-list-dates {
    @include media-breakpoint-up( md ) {
      .a-box-heading,
      .a-box-footer {
        margin-left: $spacer * 8; // When a-box is used for date list, push heading and footer
      }
    }
  }
}

// Article teaser
.a-article-teaser {
  width: 100%;
  margin-bottom: $spacer;

  a {
    display: flex;

    :hover,
    :focus {
      .a-date {
        background: $blue-dark;
      }
    }
  }
}

.a-article-teaser-text {
  float: left;
  width: calc( 100% - 60px );
  padding-left: $spacer * 3;

  @include media-breakpoint-up( md ) {
    margin-top: -2px;
  }
  @include media-breakpoint-up( lg ) {
    margin-top: -5px;
  }
  @include media-breakpoint-up( xl ) {
    margin-top: -8px;
  }


  h2 {
    @include a-fontSize20;
    @include a-fontBold;
    margin-top: 0;
    margin-bottom: 0;
  }
}

// Byline
.a-byline {
  @include a-fontSize14;
  @include a-fontMedium;

  a {
    @include a-fontSize14;
    @include a-fontMedium;
  }
}

h1 + .a-byline {
  margin-top: - $spacer * 0.5;
  margin-bottom: $spacer;
}

// Date
.a-date {
  @include media-breakpoint-up( sm ) {
    padding-top: 2px;
    margin-bottom: $spacer * 3;
  }

  width: $spacer * 5;
  height: $spacer * 5;
  margin-bottom: $spacer;
  color: $white;
  text-align: center;
  background: $blue;

  .a-date-day {
    @include a-fontSize30;
    padding-top: 5px;

    &--small {
      @include a-fontSize18;
      margin-top: $spacer;
    }
  }

  .a-date-month {
    @include a-fontSize12;
    margin-top: -7px;
  }

  &-container {
    display: none;
    padding: 0;
    @include media-breakpoint-up( md ) {
      display: flex;
      align-items: center;
    }

    &-inner {
      display: flex;
      width: 100%;
    }
  }

  &-hiddencontainer {
    display: flex;
    margin-bottom: $spacer * 4;
    @include media-breakpoint-up( md ) {
      display: none;
    }
  }
}

.a-date--large {
  width: $spacer * 12;
  height: $spacer * 11;
  margin-bottom: 0;
  color: $white;
  text-align: center;
  background: $blue;

  .a-date-day {
    @include a-fontSize60;
    padding-top: $spacer * 2;

    &--small {
      @include a-fontSize36;
      padding-top: $spacer * 3;
      padding-bottom: $spacer;
    }
  }

  .a-date-month {
    @include a-fontSize18;
    margin-top: -7px;
  }
}