@use "../mixin";

// https://m3.material.io/components/cards/

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

  position: relative;

  overflow: hidden;
  transition: var(--md-sys-motion-duration-medium4) var(--md-sys-motion-easing-standard);

  .card-impression {
    img {
      display: block;

      max-width: unset;

      object-fit: cover;
      transition: var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-standard);
    }
  }

  .card-supporting {
    color: var(--md-sys-color-on-surface);

    pointer-events: none;

    h3 {
      transition: var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-standard);
    }
  }

  &[spec="feed"] {
    margin-block-end: 24px;
    padding-block-end: 12px;

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

    background-color: var(--md-sys-color-surface-container-lowest);

    transform: translateY(0px);

    & > a {
      display: flex;
      flex-direction: column;
      gap: 12px;
    }

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

      .impression-image img {
        height: 240px;
        width: 100%;

        border-radius: var(--md-sys-shape-corner-large);
        outline: 1px solid var(--md-sys-color-outline-variant);
      }

      .impression-title {
        display: flex;
        align-items: center;
        flex-direction: row;
        gap: 12px;

        padding-inline: 12px;

        .author-mugshot {
          position: relative;

          img {
            height: 48px;
            width: 48px;

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

          span {
            @include mixin.material-symbols($size: 18);

            padding: 3px;

            position: absolute;
            right: -3px;
            bottom: -3px;

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

            border-radius: 100%;

            text-align: center;
          }
        }

        .article-title {
          h4 {
            font-family: "Josefin Sans", sans-serif;
            font-optical-sizing: auto;
            font-style: normal;
            font-weight: 600;
            text-transform: uppercase;
          }
        }
      }
    }

    .card-supporting {
      padding-inline: 12px;

      h4 {
        letter-spacing: 0.6rem;
      }
    }

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

      padding-inline: 12px;

      p {
        padding: 8px 12px;

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

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

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

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

      a {
        text-decoration: none;
      }
    }

    &[size="large"] {
      gap: 12px;

      .card-supporting h3 {
        min-height: 150px;
      }
    }

    &[size="medium"] {
      gap: 12px;

      padding-block: 12px;

      .card-impression {
        flex-direction: row-reverse;
        justify-content: space-between;

        .impression-image img {
          width: 140px;
          height: 140px;
        }

        .impression-title {
          flex-direction: column;
          align-items: flex-start;

          h5 {
            min-height: 120px;
          }
        }
      }
    }

    &[size="small"] {
      align-items: center;
      flex-direction: row;
      justify-content: space-between;

      padding-block: 6px;
      padding-inline: 18px 6px;

      .card-action button {
        justify-content: end;
      }

      $colors: ("red", "blue", "green", "yellow", "purple");

      @each $color in $colors {
        &[color="#{$color}"] {
          color: var(--md-sys-color-on-#{$color}-container);

          background-color: var(--md-sys-color-#{$color}-container);
        }
      }
    }

    &:hover {
      &[size="large"],
      &[size="medium"] {
        background-color: var(--md-sys-color-surface-container);
      }

      &[size="small"] {
        border-radius: var(--md-sys-shape-corner-large);
      }
    }
  }

  &[spec="clear"] {
    border-radius: var(--md-sys-shape-corner-extra-large);

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

    cursor: pointer;

    @media (prefers-color-scheme: dark) {
      background-color: var(--md-sys-color-surface-dim);
    }

    .card-impression {
      position: relative;

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

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

      overflow: hidden;

      img {
        height: 240px;
        width: 100%;
      }
    }

    .card-supporting {
      display: flex;
      flex-direction: column;
      gap: 10px;

      padding-block: 20px 18px;
      padding-inline: 20px;

      #card-supporting--weaken {
        text-align: end;

        opacity: 0.5;
      }
    }

    &:hover {
      color: var(--md-sys-color-on-secondary-container);

      background-color: var(--md-sys-color-secondary-container);

      .card-supporting h3 {
        font-weight: 700;
      }
    }

    &:active {
      border-radius: calc(2 * var(--md-sys-shape-corner-extra-large));

      transition: var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-emphasized);

      .card-supporting h3 {
        font-weight: 200;
      }
    }
  }

  &[spec="focus"] {
    height: 240px;

    border-radius: var(--md-sys-shape-corner-extra-large);
    outline: 1px solid var(--md-sys-color-outline-variant);

    background-color: var(--md-sys-color-primary);

    cursor: pointer;

    .card-impression {
      height: 100%;

      img {
        width: 100%;
        height: 100%;
      }
    }

    .card-supporting {
      position: absolute;
      bottom: 0px;

      margin: 20px;

      color: var(--md-sys-color-on-primary);

      transform: translateY(calc(100% + 20px));
      transition: var(--md-sys-motion-duration-medium4) var(--md-sys-motion-easing-emphasized);

      h3 {
        font-weight: 100;
      }
    }

    &:hover {
      img {
        opacity: 0.5;

        transition: opacity var(--md-sys-motion-duration-medium2);
      }

      .card-supporting {
        transform: translateY(0%);

        h3 {
          font-weight: 700;
        }
      }
    }

    &:active {
      transform: scale(0.95);
    }
  }
}
