/* ==========================================================================
 * Media Card
 * ========================================================================== */

.mds-c-media-card {
  --mds-t-background-color: var(--mds-t-background-color--secondary);
  --mds-v-media-card__border: 1px solid var(--mds-t-border-color--secondary);
  --mds-v-media-card__size: 5rem;

  align-items: stretch;
  background-color: var(--mds-t-background-color);
  border-radius: var(--mds-d-border-radius--default);
  display: grid;
  grid-template-columns: auto 1fr auto;
  grid-template-rows: auto 1fr auto;
  justify-content: space-between;
  min-height: var(--mds-v-media-card__size);
  overflow: hidden;
  position: relative;

  &.mds-c-media-card--uploading {
    grid-template-columns: 1fr;

    &__error {
      grid-template-columns: 1fr;

      --mds-t-background-color: var(--mds-d-background-color--danger-muted);
    }
  }

  > .mds-c-progress {
    bottom: 0;
    position: absolute;

    &:not(:last-child) {
      margin-bottom: 0;
    }
  }
}

.mds-c-media-card__wrapper {
  &:not(:last-child) {
    margin-bottom: var(--mds-d-spacing--lg);
  }

  &.mds-is-dragging {
    box-shadow:
      0 0 0 1px var(--mds-t-border-color--accent),
      var(--mds-d-elevation--4);
  }

  &.mds-is-draggable:focus-visible {
    box-shadow: 0 0 0 1px var(--mds-t-border-color--accent);
  }
}

.mds-c-media-card__image {
  backface-visibility: hidden; /* Fixes glitch where border-radius was hiding/showing on hover */
  min-height: var(--mds-v-media-card__size);
  transition: opacity 0.2s ease-out;
  width: var(--mds-v-media-card__size);

  &[href] {
    &:enter {
      opacity: 0.8;
    }
  }

  .mds-c-thumbnail {
    --mds-v-thumbnail__font-size: var(--mds-d-font-size--xxxl);
    --mds-v-thumbnail__size: var(--mds-v-media-card__size);

    min-height: 100%;
  }
}

.mds-c-media-card__info {
  overflow: hidden;
  padding: var(--mds-d-spacing--lg);
}

.mds-c-media-card__title {
  @mixin mds-m-heading--size-med;

  overflow-wrap: break-word;

  &:not(:last-child) {
    margin-bottom: var(--mds-d-spacing--med);
  }

  &--readonly {
    @mixin mds-m-text-overflow-ellipsis;
  }

  .mds-c-media-card--uploading & {
    text-align: center;

    > .mds-c-icon {
      margin-bottom: var(--mds-d-spacing--sm);
    }
  }

  .mds-c-media-card--uploading__error & {
    color: var(--mds-t-text-color--danger);
    text-align: center;

    > .mds-c-icon {
      margin-bottom: var(--mds-d-spacing--sm);
    }
  }
}

.mds-c-media-card__actions {
  align-items: flex-start;
  display: flex;
  padding-right: var(--mds-d-spacing--lg);
  padding-top: var(--mds-d-spacing--lg);

  .mds-c-media-card--uploading & {
    position: absolute;
    right: 0;
    top: 0;
  }

  .mds-c-media-card--uploading__error & {
    position: absolute;
    right: 0;
    top: 0;
  }
}

.mds-c-media-card__details {
  background-color: var(--mds-t-background-color--primary);
  border-bottom: var(--mds-v-media-card__border);
  border-left: var(--mds-v-media-card__border);
  border-radius: 0 0 var(--mds-d-border-radius--default)
    var(--mds-d-border-radius--default);
  border-right: var(--mds-v-media-card__border);
  grid-column: 1 / -1;
  overflow: hidden;
  position: relative;
  transition:
    height 300ms cubic-bezier(0.65, 0.05, 0.36, 1),
    opacity 300ms cubic-bezier(0.55, 0.09, 0.68, 0.53);

  &[aria-hidden='true'][aria-expanded='false'] {
    height: 0;
    opacity: 0;
  }

  &[aria-hidden='false'][aria-expanded='true'] {
    opacity: 1;
  }
}

/* 
  Add WCAG Reflow Compliance 
  While WCAG Reflow (SC 1.4.10) specifically requires support up to 400% zoom,
  applied reflow styles starting at 250% zoom, since some elements are cut off
  or difficult to use even at that level.
  At 250% zoom on a 1280px screen, the effective CSS width is about 512px.
*/
@media (max-width: $reflow-zoom-level--250) {
  .mds-c-media-card {
    &__info {
      padding: var(--mds-d-spacing--sm);
      width: 100%;

      div[data-tracking$='-badge'] {
        flex: 1 1 auto;
        margin-bottom: 0;
        text-align: center;
      }
    }

    &__title {
      .mds-c-editable {
        text-align: center;
      }
    }

    &__actions:has(button[data-testid='task-files-menu-ellipsis-child-menu']) {
      padding-top: var(--mds-d-spacing--xs);
    }
  }
}