@use "../mixin";

.MaterialCard {
  display: flex;
  flex-direction: column;

  position: relative;

  text-decoration: none;

  outline: none;

  .content {
    display: flex;
    flex-direction: column;

    position: relative;

    height: 100%;
    width: 100%;

    overflow: hidden;

    .impression-area {
      z-index: 1;
    }

    .supporting-area {
      pointer-events: none;
    }
  }

  &.entrance {
    animation: card-entrance var(--md-sys-motion-spring-slow-spatial-duration) calc(min(var(--delay), 20) * 0.08s)
      var(--md-sys-motion-spring-slow-spatial) forwards;
    opacity: 0;
    transform: translateY(30px);
    will-change: transform, opacity;
  }

  &:focus-visible {
    .content {
      @include mixin.focus-ring($thickness: 4);

      &::after {
        background-color: var(--md-sys-state-focus-state-layer);
      }
    }
  }

  &.feed {
    border-radius: var(--md-sys-shape-corner-large);

    .content {
      display: flex;
      flex-direction: column;
      gap: 12px;

      border-radius: var(--md-sys-shape-corner-large);

      .impression-area {
        display: flex;
        flex-direction: column-reverse;
        gap: 12px;

        position: relative;

        border-radius: 0px 0px var(--md-sys-shape-corner-large) var(--md-sys-shape-corner-large);

        overflow: hidden;

        .tips-container {
          display: flex;
          align-items: flex-end;
          flex-direction: column-reverse;
          gap: 6px;

          position: absolute;

          width: 100%;

          padding: 8px;

          pointer-events: none;
          user-select: none;
          -moz-user-select: none;
          z-index: 1;

          .tips {
            padding-inline: 6px;

            color: var(--md-sys-color-inverse-on-surface);

            border-radius: var(--md-sys-shape-corner-small);

            background-color: var(--md-sys-color-inverse-surface);

            &.download {
              color: var(--md-sys-color-on-tertiary-container);

              background-color: var(--md-sys-color-tertiary-container);
            }
          }
        }

        .image-container {
          display: grid;
          gap: 6px;

          position: relative;

          height: 200px;

          z-index: 0;

          &:has(img:nth-child(2)) {
            img:nth-child(1) {
              opacity: 1;
              z-index: 0;
            }

            img:nth-child(2) {
              opacity: 0;
              z-index: 1;
            }
          }

          img {
            position: absolute;
            top: 0px;

            height: inherit;
            width: 100%;

            object-fit: cover;
            transition: opacity var(--md-sys-motion-spring-default-effect-duration)
              var(--md-sys-motion-spring-default-effect);
          }
        }
      }

      .supporting-area {
        padding-inline: 18px;
        padding-block-end: 16px;

        h4 {
          color: var(--md-sys-color-primary);
          font-variation-settings: "wdth" 500;
          text-transform: uppercase;
        }

        p {
          letter-spacing: 0.6rem;
        }
      }

      .actions-area {
        display: flex;
        align-items: center;
        flex-direction: row;
        justify-content: space-between;

        p {
          padding: 8px 12px;

          border-radius: var(--md-sys-shape-corner-medium);
        }

        div {
          display: flex;
          flex-direction: row;
          gap: 12px;
        }

        a {
          text-decoration: none;
        }
      }

      &:hover {
        .impression-area .image-container {
          &:has(img:nth-child(2)) {
            img:nth-child(2) {
              opacity: 1;
            }
          }
        }
      }
    }
  }

  &.elevated {
    background-color: var(--md-sys-color-surface-container-low);

    box-shadow: 0px 1px 6px -3px var(--md-sys-color-shadow);

    .content {
      color: var(--md-sys-color-on-surface);
    }
  }

  &.filled {
    background-color: var(--md-sys-color-surface-container-highest);

    .content {
      color: var(--md-sys-color-on-surface);
    }
  }

  &.outlined {
    border: 1px solid var(--md-sys-color-outline-variant);

    .content {
      color: var(--md-sys-color-on-surface-variant);
    }
  }
}

@media (prefers-reduced-motion: reduce) {
  .MaterialCard.entrance {
    animation: none;
    opacity: 1;
    transform: none;
  }
}
