/**
** ARTICLE AUTHOR POPUP
**
** EXAMPLE:
** <div class="c-article-author-popup">
**  <span class="c-article-author-popup__authors"><svg /> [Opphavsperson].</span>
**  <span class="c-article-author-popup__date"><svg /> Publisert [dato]</span>
** </div>
**/

.c-article-author-popup {

  &__ul-list {
    @include font-size(18px, 20px);
    list-style-type: none;
    list-style-image: none;
    margin: $spacing--small 0;
    padding: 0;
    li {
      margin: 0;
      padding: $spacing--small / 2 0;
      span:not(:first-child) {
        padding-left: $spacing--small / 2;
      }
    }
    button {
      font-size: inherit;
      line-height: inherit;
    }
    @include mq($until: tablet) {
      &:not(--large) {
        li {
          line-height: $spacing;
          padding-bottom: $spacing;
          span {
            &:first-child {
              display: block;
            }
          }
        }
      }
    }
  }

  &--author-licenses {
    @include font-size(14px, 20px);
    color: $brand-grey-dark;
  }

  ul {
    margin: $spacing--small 0;
    padding: 0;
    list-style: none;
    li {
      margin: 0;
      padding: 0;
    }
  }

  &__link-container {
    margin-top: $spacing;
    display: flex;
    flex-flow: column;
    align-items: flex-start;
    > a:not(:first-child) {
      margin-top: $spacing--small;
    }
  }

  &__author-info {
    display: flex;
    margin-bottom: $spacing;
    animation-name: fadeIn;
    animation-duration: 0.5s;

    > :nth-child(2) {
      flex-grow: 1;
      padding-left: $spacing;
    }

    @include mq($until: mobileWide) {
      display: block;
      margin-bottom: 2rem;
      > :nth-child(2) {
        padding-top: $spacing;
        padding-left: 0;
      }
    }
  }
}