@import "../../../sass/webpack_deps";

/// ----------------------------------------------------------------------------
/// Settings map
///
/// Settings are called via the `get` method, which is simply an alias for
/// Sass's `map-get` method.
///
/// @usage
/// `get($map-name, "setting-name")`
/// ----------------------------------------------------------------------------

$author: (
  "mq-min": "min-width: #{$min-600}",
  "mq-max": "max-width: #{$max-600}"
);





/// ----------------------------------------------------------------------------
/// Base
/// ----------------------------------------------------------------------------

.author {
  font-size: 1.4rem;
  letter-spacing: .01rem;
  margin-left: auto;
  margin-right: auto;

  a {
    display: inline-block;
  }
}





/// ----------------------------------------------------------------------------
/// Modifiers
///
/// - .author--contained: Used for article component; or when the author is not
///   inside of a `container`
/// - .author--vertical: Used for love-letter and article components; or when
///   the `avatar` and `author-details` are stacked
/// - .author--horizontal: Used for related articles on highlight pages; or when
///   the `avatar` and `author-details` are inline
/// - .author--small: Used for love-letter component; while it has no styles of
///   its own, it changes font size and margins for `author-name` and
///   `author-title`; it doesn't effect `avatar`
/// - .author--article: Used for article component; it changes font size and
///   display for `author-name` and `author-title`; hides `avatar`
/// ----------------------------------------------------------------------------

.author--contained {
  @include container;
  width: auto;

  @media (min-width: $min-480) {
    @include with-layout(static) {
      width: span(3);
    }
  }



  // Implementation detail

  .article__author & {
    @media (min-width: $min-480) {
      width: 100%;
    }
  }
}

.author--vertical {
  text-align: center;



  // Implementation detail

  .article__author & {
    @media (max-width: $max-720) {
      text-align: left;
    }
  }
}

.author--horizontal {
  display: inline-block;
  margin-top: 2.4rem;
  overflow: hidden;

  @media (#{get($author, "mq-min")}) {
    margin-top: 3rem;
  }

  &.has-bio {
    margin-top: 1.2rem;

    @media (#{get($author, "mq-min")}) {
      margin-top: 1.2rem;
    }
  }
}

.author--article {
  @media (#{get($author, "mq-max")}) {
    margin-top: .6rem;
  }

  .avatar {
    @media (#{get($author, "mq-max")}) {
      display: none;
    }
  }
}





/// ----------------------------------------------------------------------------
/// Elements
/// ----------------------------------------------------------------------------

.author__details {
  .author--horizontal & {
    float: left;
    margin-top: .6rem;
  }

  .author--vertical & {
    margin-top: 1.3rem;

    @media (#{get($author, "mq-min")}) {
      margin-top: 1.8rem;
    }
  }

  .author--vertical.author--article & {
    @media (#{get($author, "mq-max")}) {
      margin-top: 0;
    }
  }

  .author--vertical.author--small & {
    @media (#{get($author, "mq-min")}) {
      margin-top: 3rem;
    }
  }
}

.author__name {
  color: $titlegray;
  font-size: 1.2rem;
  font-weight: $font-weight-semibold;
  line-height: 1;

  @media(#{get($author, "mq-min")}) {
    font-size: 1.4rem;
  }

  &:not(.is-inline) {
    margin-bottom: .8rem;
    text-transform: uppercase;

    .author--small & {
      margin-bottom: .5rem;
    }
  }

  &.is-inline {
    display: inline;
    font-size: 1.4rem;
  }

  .author--small & {
    letter-spacing: .06rem;

    @media(#{get($author, "mq-min")}) {
      font-size: 1.2rem;
    }
  }

  .author--article & {
    @media(#{get($author, "mq-max")}) {
      display: inline;
      font-size: 1.1rem;
    }
  }
}

.author__title {
  color: $light-text-color;
  font-size: 1.4rem;
  letter-spacing: .06rem;
  line-height: 1;

  &:not(.is-inline) {
    font-family: $miller-daily;
    font-style: italic;
    letter-spacing: 0;
  }

  &.is-inline {
    display: inline;
    font-size: 1.2rem;
  }

  .author--article & {
    @media(#{get($author, "mq-max")}) {
      display: inline;
      font-size: 1.1rem;
      margin-left: 1.2rem;
    }
  }
}

.author__bio {
  margin-top: .4rem;
  max-width: 40rem;
}