/* ==========================================================================
   Media.
   ========================================================================== */

/* ==========================================================================
   Image.
   ========================================================================== */
.media-image-empty {
  display: block;
  width: 100px;
  height: 60px;
  background: var(--color-gray-050);

  &:before {
    --icon-size: var(--icon-size-m);
    content: "";
    display: inline-block;
    width: var(--icon-size);
    height: var(--icon-size);
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: var(--icon-size);
    mask-image: var(--icon-datagone-image);
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 5;
    transform: translate(-50%, -50%);
    background: color-mix(in oklab, var(--color-text-light) 40%, white);
  }
}

/* ==========================================================================
   Document.
   ========================================================================== */
.media--document {
  a:not(.button) {
    color: var(--color-text);
    font-family: var(--font-family-secondary-heading);

    &:active,
    &.is-active,
    &:focus,
    &:hover {
      color: var(--color-fg-primary);

      .item-media {
        .icon,
        &:after {
          opacity: 1;
          visibility: visible;
        }
        &:after {
          opacity: .5;
        }
        .icon:before {
          background-color: var(--color-fg-primary);
        }

        img {
          transform: scale(1.05);
        }
      }
      .item-download {
        .button-icon:before {
          background-color: var(--color-fg-primary);
        }
      }
    }
  }

  .item-media {
    position: relative;
    height: 220px;
    background: var(--color-gray-100);
    border-radius: 4px;
    overflow: hidden;

    .icon,
    &:after {
      position: absolute;
      z-index: 5;
      transition: .2s;
      opacity: 0;
      visibility: hidden;
    }
    &:after {
      content: "";
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: var(--color-fg-primary);
    }
    .icon {
      top: 50%;
      left: 50%;
      z-index: 10;
      transform: translate(-50%, -50%);
      --icon-size: var(--icon-size-xl);

      &:before {
        transition: .2s;
      }
    }
    &.is-empty {
      .icon {
        visibility: visible;
        opacity: 1;

        &:before {
          background-color: rgba(150, 156, 161, .5);
        }
      }
    }

    img {
      transition: .4s;
    }
  }

  .item-header {
    padding: var(--space-s) 0;
  }

  .item-title {
    margin: 0;
    line-height: 1.2;
    word-break: break-word;
  }

  .item-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-s) 0;
    font-size: var(--font-size-s);
  }

  .item-date {
    margin: 0;
  }

  .item-download {
    display: flex;
    align-items: center;
    font-size: inherit;

    .icon {
      margin-left: 6px;
    }
  }
}

/* ==========================================================================
   Iframe.
   ========================================================================== */
.iframe-container {
  position: relative;
  overflow: hidden;

  iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }

  &.l-responsive {
    height: 0;
    padding-bottom: 56.25%;
  }
}