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

@mixin contact-card-image-width($width) {
  &--#{$width} {
    width: #{$width}px;

    img {
      width: #{$width}px;
      height: #{$width}px;
      min-width: #{$width}px;
    }
  }
}

#{$component-prefix}contact-card {
  $p: &;
  @include flexbox;
  align-items: center;

  &__image {
    float: left;
    width: 20%;
    margin-right: 2.5rem;

    @include contact-card-image-width(200);
    @include contact-card-image-width(100);

    img {
      display: block;
      object-fit: cover;
    }
  }

  address {
    font-style: normal;

    a {
      text-decoration: underline;
      color: $sodra-black;
    }
  }

  &__name {
    @include media-breakpoint-up(md) {
      @include display-small;
    }
  }

  h5 {
    margin: 0;
  }

  &__title {
    padding-bottom: 0.5rem;
  }

  &--direction-column {
    flex-direction: column;

    address {
      padding-top: 1.5rem;
      padding-bottom: 1.5rem;
      width: 100%;
    }

    #{$p}__image {
      width: 100%;
      margin-right: 0;
      img {
        width: 100%;
        height: auto;
      }
    }
  }

  &--small {
    #{$p} {
      &__name {
        @include body-large;
      }
    }
  }

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

    &#{$p}--direction-column {
      address {
        padding-left: 1.5rem;
      }
    }

    #{$p} {
      &__information {
        @include body-large;
        color: $sodra-black;
      }
    }
  }
}