@use "00-base/configure" as *;

.blogpost-collection-header {
  padding-top: $standard-spacing--xxsmall;
  padding-bottom: $standard-spacing--xxsmall;

  &--dark-font &--inner {
    color: var(--mf-c-black);

    .blogpost-collection-header__content a {
      color: var(--mf-c-black);
    }
  }
}

.blogpost-collection-header--inner {
  color: var(--mf-c-font-inverse);
  display: flex;
  align-items: center;
  justify-content: space-between;

  @include ma-container;
}

.blogpost-collection-header__image {
  display: none;
  width: 75px;
  height: auto;
  margin-left: 1rem;

  img {
    display: block;
  }

  @media ($bp-x-small-min) {
    display: block;
  }
}

.blogpost-collection-header__content {
  font-weight: $fonts-normal;
  flex-grow: 1;
  font-size: $fonts-2xlarge;

  a {
    color: var(--mf-c-font-inverse);

    &:hover {
      border-bottom-color: var(--mf-c-white);
    }
  }

  svg {
    fill: var(--mf-c-white);
    opacity: 0.5;
  }
}

.blogpost-collection-header__description {
  font-size: $fonts-large;
  font-weight: $fonts-normal;
}