@use "system/breakpoints";
@use "system/colors";
@use "system/icon-map";
@use "system/spacing";
@use "system/typography";
@use "system/states";
@use "sass:map";

$ods-portrait-card-image-height-small: 200px;
$ods-portrait-card-image-height-medium: 230px;
$ods-portrait-card-image-height-large: 290px;

.ods-portrait-card {
  position: relative;

  &__media {
    img {
      display: block;
      height: $ods-portrait-card-image-height-small;
      line-height: 0;
      object-fit: cover;
      width: 100%;

      @include breakpoints.medium {
        height: $ods-portrait-card-image-height-medium;
      }

      @include breakpoints.large {
        height: $ods-portrait-card-image-height-large;
      }
    }
  }

  &__content {
    @extend %ods-color-bg-gray-light;
    @extend %ods-padding-horizontal-5, %ods-padding-vertical-5, %ods-padding-8-breakpoint-medium;
  }

  &__actions {
    @extend %ods-padding-horizontal-5, %ods-padding-bottom-5, %ods-padding-top-0-breakpoint-medium, %ods-padding-horizontal-5-breakpoint-medium, %ods-padding-bottom-5-breakpoint-medium, %ods-padding-top-0-breakpoint-large, %ods-padding-horizontal-5-breakpoint-large, %ods-padding-bottom-8-breakpoint-large;
    @extend %ods-color-bg-gray-light;

    position: relative;
  }

  &__heading {
    @extend %ods-margin-bottom-1;
    @extend %ods-text--size-india, %ods-text--size-golf-breakpoint-medium;
    @extend %ods-text--weight-medium;
  }

  &__text {
    @extend %ods-text--size-kilo, %ods-text--size-juliett-breakpoint-medium;
    @extend %ods-text--weight-light;
  }

  &__published {
    @extend %ods-margin-top-3, %ods-margin-top-4-breakpoint-medium;
    @extend %ods-text--size-lima;
    @extend %ods-text--weight-light;
  }

  &--actions {
    & .ods-portrait-card__content {
      @extend %ods-padding-vertical-5, %ods-padding-vertical-8-breakpoint-medium, %ods-padding-vertical-8-breakpoint-large, %ods-padding-horizontal-5, %ods-padding-horizontal-8-breakpoint-medium, %ods-padding-horizontal-8-breakpoint-large;
    }

    & .ods-portrait-card__actions {
      @extend %ods-padding-top-0, %ods-padding-top-0-breakpoint-medium, %ods-padding-top-0-breakpoint-large, %ods-padding-horizontal-5, %ods-padding-horizontal-8-breakpoint-medium, %ods-padding-horizontal-8-breakpoint-large, %ods-padding-bottom-5, %ods-padding-bottom-8-breakpoint-medium, %ods-padding-bottom-8-breakpoint-large;

      & > * {
        padding-left: 0;
        padding-right: 0;
      }
    }

    &.ods-portrait-card--xs {
      & .ods-portrait-card__content {
        @extend %ods-padding-vertical-5, %ods-padding-horizontal-5, %ods-padding-horizontal-4-breakpoint-medium, %ods-padding-horizontal-4-breakpoint-large;
      }

      & .ods-portrait-card__actions {
        @extend %ods-padding-top-0, %ods-padding-top-0-breakpoint-medium, %ods-padding-top-0-breakpoint-large, %ods-padding-horizontal-5, %ods-padding-horizontal-4-breakpoint-medium, %ods-padding-horizontal-4-breakpoint-large, %ods-padding-bottom-5, %ods-padding-bottom-5-breakpoint-medium, %ods-padding-bottom-5-breakpoint-large;
      }
    }
  }

  &--white {
    & .ods-portrait-card__content,
    & .ods-portrait-card__actions {
      @extend %ods-color-bg-white;
    }
  }

  &--xs {
    & .ods-portrait-card__content {
      @extend %ods-padding-vertical-5, %ods-padding-horizontal-5, %ods-padding-horizontal-4-breakpoint-medium, %ods-padding-horizontal-4-breakpoint-large;
    }

    & .ods-portrait-card__heading {
      @extend %ods-text--size-india;
      @extend %ods-margin-bottom-1;
    }

    & .ods-portrait-card__text {
      @extend %ods-text--size-kilo;
      @extend %ods-text--weight-light;
    }

    & .ods-portrait-card__published {
      @extend %ods-margin-top-3;
      @extend %ods-text--size-lima;
    }

    & .ods-portrait-card__media {
      img {
        @include breakpoints.large {
          height: 213px;
        }
      }
    }

    & .ods-portrait-card__actions {
      @extend %ods-padding-top-0, %ods-padding-top-0-breakpoint-medium, %ods-padding-top-0-breakpoint-large, %ods-padding-horizontal-4-breakpoint-medium, %ods-padding-bottom-5, %ods-padding-bottom-5-breakpoint-medium, %ods-padding-bottom-5-breakpoint-large;
    }
  }

  &__link {
    display: block;
    text-decoration: none;

    &::after {
      content: "";
      position: absolute;
      inset: 0;
    }

    &:focus-visible {
      outline: none;
    }

    &:focus-visible::after {
      box-shadow: 0 0 0 0.125rem colors.$blue-state;
      outline-offset: 0.125rem;
      outline: 0.25rem solid colors.$purple-light;
    }
  }

  & .ods-portrait-card__content:hover,
  & .ods-portrait-card__text:hover,
  & .ods-portrait-card__published:hover {
    color: states.$hover;
  }

  & .ods-portrait-card__heading:hover {
    text-decoration: underline;
  }

  &--nolink {
    & .ods-portrait-card__content:hover,
    & .ods-portrait-card__text:hover,
    & .ods-portrait-card__published:hover {
      color: colors.$blue-dark;
    }

    & .ods-portrait-card__heading:hover {
      text-decoration: none;
    }
  }

  &--image-breakpoint-medium {
    & .ods-portrait-card__media {
      img {
        display: none;
        @include breakpoints.medium {
          display: block;
        }
      }
    }
  }

  &--zoom {
    & .ods-portrait-card__media {
      overflow: hidden;

      img {
        transform: scale(1);
        transition: all 0.5s;
      }
    }

    &:hover {
      & .ods-portrait-card__media {
        img {
          transform: scale(1.1);
        }
      }
    }
  }

  &--external {
    & .ods-portrait-card__link .ods-portrait-card__heading {
      &::after,
      &:hover::after {
        font-family: "Oslo Icons", Arial, Helvetica, sans-serif !important;
        font-size: 0.6em;
        content: map.get(icon-map.$icons, "new-window") !important;
        display: inline-block;
        margin-left: 0.4em;
      }
    }
  }
}