$padding-bottom: 17px;

.c-factbox {
  position: relative;
  z-index: 1;
  margin: $spacing--large 0 ($spacing--large - $padding-bottom) 0;
  overflow: hidden;
  padding-bottom: $padding-bottom;

  @include inuit-font-size(16px);
  padding-bottom: $padding-bottom;

  &__content {
    color: $brand-grey-dark;
    padding: $spacing $spacing $spacing--large;
    border: 1px solid $brand-grey--light;
    max-height: 190px;
    transition: max-height 0.6s ease-in-out;
    overflow: hidden;

    &:after {
      content: '';
      text-align: center;
      position: absolute;
      top: 0;
      bottom: 20px;
      right: 0;
      width: 99%;
      margin: 0.5% 0.5% 0 0.5%;
      transition: opacity 0.5s cubic-bezier(0.74, -0.04, 0.96, 0.97);
      background: linear-gradient(rgba($brand-color--light, 0), $white);
      opacity: 1;
      z-index: 0;
    }

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

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

  &.expanded {
    max-height: 500vh;

    .c-factbox {
      &__content {
        max-height: 500vh;

        > div > * {
          // Hack to fix links and interactions inside aside
          z-index: 9;
          position: relative;
        }

        &:after {
          opacity: 0;
          z-index: -1;
        }
      }

      &__button:after {
        transform: rotate(180deg);
        top: 38%;
      }
    }
  }

  &__button {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 2px;
    z-index: 9;
    box-shadow: 0 0px 15px rgba(gray, 0.3);
    margin: auto;
    padding: 5px 15px !important;
    width: 0px;
    height: 33px;
    text-align: center;
    font-size: 14px;
    border-radius: 50% !important;

    &:after {
      content: '';
      display: inline-block;
      position: absolute;
      top: 45%;
      left: 32%;
      width: 0;
      height: 0;
      border-left: 5px solid transparent;
      border-right: 5px solid transparent;
      border-top: 5px solid $white;
    }
    &:hover,
    &:active {
      background: $brand-color--dark !important;
    }
  }

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

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

  h2:first-child {
    border-bottom: 2px solid $brand-color;
    margin-top: 0;
    margin-bottom: $spacing;
    @include inuit-font-size(22px, 34px);
    font-weight: $font-weight-bold;
    position: relative;
    z-index: 2;
  }

  h2,
  h3,
  h4,
  h5 {
    display: block;
    @include inuit-font-size(16px);
    letter-spacing: 0.1em;
    margin-top: $spacing;
    margin-bottom: $spacing--small;
    border-bottom: 1px solid $brand-color--light;
  }
}