@use '../../sass/abstracts' as *;

#{$component-prefix}card {
  color: $sodra-black;
  display: flex;
  flex-direction: column;
  height: 100%;
  position: relative;

  &:hover {
    color: inherit;
  }

  a {
    color: $sodra-black;
  }

  &__image {
    position: relative;
    padding-bottom: 66.6666%;
    background-size: cover;
    background-position: center;
    margin-bottom: 1.5rem;

    img {
      position: absolute;
      top: 0;
      left: 0;
      height: 100%;
      width: 100%;
      object-fit: cover;
    }
  }

  &__text {
    @include body-medium;

    p {
      margin-bottom: 0;
    }
  }

  &__pre-heading {
    color: $sodra-black-75;
    text-transform: uppercase;
    margin-bottom: 5px;

    @include alt-body-x-small;

    @include media-breakpoint-up(md) {
      @include alt-body-small;
    }
  }

  &__heading {
    margin-bottom: 0.5rem;
    color: $sodra-black;

    @include headline-medium;

    @include media-breakpoint-up(md) {
      @include headline-large;
    }

    &-arrow {
      &::after {
        @include unity-symbols('chevron-right');
        float: right;
      }
    }
  }

  &__summary {
    @include body-large;
    color: $sodra-black;
    max-height: 6.25rem;
    position: relative;
    margin-bottom: 2rem;
    overflow: hidden;

    &:after {
      position: absolute;
      bottom: 0;
      left: 0;
      content: '';
      height: 4rem;
      width: 100%;
      display: block;
    }
  }

  &__tags {
    margin-top: auto;
    padding-top: $spacer-6;
    margin-bottom: 0;
  }

  &--light-grey {
    background-color: $light-grey;
  }

  &--light-blue {
    background-color: $blue-50;
  }

  &--white {
    background-color: $white;
  }

  &--white,
  &--light-grey,
  &--light-blue {
    #{$component-prefix}card__text {
      padding: 0.5rem;
    }
  }

  &--horizontal {
    #{$component-prefix}card {
      @include media-breakpoint-up(md) {
        &__image {
          float: left;
          width: 33.333%;
          padding-bottom: 22.222%;
          margin-right: 1rem;
        }

        &__text {
          height: 100%;
        }

        &__timestamp {
          position: absolute;
          bottom: 0;
        }
      }
    }
  }
}

a#{$component-prefix}card {
  &:hover {
    #{$component-prefix}card__heading {
      color: lighten($sodra-black, 15%);
    }
  }
}