@use "../../config" as *;
@use "../../spacing" as *;
@use "../../theme" as *;
@use "../../type" as *;
@use "../../breakpoint" as *;
@use "../../utilities/convert" as *;
@use "../../utilities/skeleton" as *;
@use "../../utilities/visually-hidden" as *;
@use "../../utilities/focus-outline" as *;

@mixin card {
  .#{$prefix}--card-wrapper {
    padding: 1rem;
    border-radius: 2px;
    height: fit-content;
    background-color: $neutral-neutral95;

    &:hover {
      background-color: $neutral-neutral90;
    }

    &:focus {
      outline: 1px solid $field-focus;
      border-color: $field-focus;
    }

    &__disabled {
      background-color: $field-background-disabled;
      pointer-events: none;
    }

    &__elevated {
      background-color: $fill-field;
      box-shadow: 0px 2px 8px 2px rgba(3, 10, 23, 0.07);
      &:hover {
        background-color: $neutral-neutral95;
      }
    }

    &__outlined {
      background-color: $fill-field;
      border: 1px solid $border-subtle;
      &:hover {
        background-color: $neutral-neutral95;
      }
    }
  }

  .#{$prefix}--card-box {
    box-shadow: 0 1px 8px rgba(0, 0, 0, 0.15);

    a {
      color: $text-body-default;
      text-decoration: none;
    }
  }

  .#{$prefix}--photo-card--simple-card {

    &__no-image {
      .#{$prefix}--photo-card__info {
        position: relative;
      }
    }

    .#{$prefix}--header-photo {
      width: 100%;
      height: 200px;
      object-fit: cover;
      margin: 0;
    }

    .#{$prefix}--photo-card__info {
      background: $background-main;
      padding: $spacing-05;
    }

    .#{$prefix}--photo-card__info__background {
      display: none;
    }

    .#{$prefix}--photo-card__info__title {
      color: $action-default-fill-primary-default;
      font-size: 1.375rem;

      &:hover {
        text-decoration: underline;
      }
    }
  }

  .#{$prefix}--photo-cardnew__info__metadata {
    margin: 0;
    margin-bottom: $spacing-03;
    @include type-style("caption");
    text-transform: uppercase;
    letter-spacing: 0.05em;
    // color: $text-body-default;
  }

  .#{$prefix}--photo-cardnew__info__subtitle {
    margin: 0;
    @include type-style("body-short");
  }

  .#{$prefix}--photo-cardnew__info__title {
    margin: 0;

    & + .#{$prefix}--photo-cardnew__info__subtitle {
      margin-top: $spacing-03;
    }
  }

  .#{$prefix}--photo-cardnew__background {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: inherit;
    background-size: cover;
    background-position: 50% 50%;
    z-index: 100;
    overflow: hidden;
  }

  .#{$prefix}--photo-cardnew--overlay {
    .#{$prefix}--photo-cardnew__info {
      position: absolute;
      bottom: 0;
      left: 0;
      width: inherit;
      padding: $spacing-05 * 1.1 $spacing-05;
      z-index: 100;
      overflow: hidden;
      display: flex;
      align-items: center;
      justify-content: space-between;
      color: $text-inverse-default;
      background: rgba(#0b1923, 0.9); // hex is for $overlay token
    }

    // .#{$prefix}--photo-cardnew__info {

    // }
    .#{$prefix}--photo-cardnew__info__background {
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      filter: blur(6px);
      background-size: cover;
      transform: scale(1.05);
      z-index: -1;
      height: calcRem(200px);

      @include breakpoint("lg") {
        height: calcRem(260px);
      }

      &:after {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        transition: all 0.1s;
        background: #000000;
        opacity: 0.6;
      }
    }
  }

  .#{$prefix}--photo-cardnew--overlay {
    height: calcRem(300px);
    box-shadow: none;
    @include breakpoint("lg") {
      height: calcRem(500px);
    }

    .#{$prefix}--photo-cardnew__info {
      padding: $spacing-06;
    }

    .#{$prefix}--photo-cardnew__info__background {
      height: calcRem(300px);

      @include breakpoint("lg") {
        height: calcRem(500px);
      }
    }
  }
}