@import 'part:@lyra/base/theme/variables-style';

.root {
  position: relative;
  overflow: hidden;
  width: 100%;
}

.title {
  font-size: 1em;
  font-weight: 100;
  text-transform: uppercase;
  margin: 0;
}

.subtitle {
  font-size: 1em;
  font-weight: 300;
  margin: 0;
}

.description {
  composes: small from 'part:@lyra/base/theme/typography/text-blocks-style';
  max-width: 80%;
  color: var(--white);
  font-weight: 100;
  margin: 1em auto;
  opacity: 0.5;
}

.mediaContainer {
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: var(--gray-lighter);

  @nest & > img {
    height: 100%;
    width: 100%;
  }

  /* Mainly for styling fallback icons */
  @nest & :global(.lyra-studio__preview-fallback-icon) {
    width: 2em;
    height: 2em;
    opacity: 0.5;
  }
}

.progress {
  position: absolute;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: color(var(--component-bg) a(70%));
}

.mediaString {
  composes: absoluteCenter from 'part:@lyra/base/theme/layout/positioning-style';
  padding: var(--small-padding);
  font-size: var(--font-size-small);
  color: var(--gray);
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  max-width: 100%;
  box-sizing: border-obx;
}

.meta {
  composes: frosted from 'part:@lyra/base/theme/layout/backgrounds-style';
  position: absolute;
  opacity: 0;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
  align-items: center;
  justify-content: center;
  text-align: center;
  z-index: 1;
  transition: opacity 0.3s ease-out;

  /*
    Disable meta for now
    display: flex;
  */

  display: none;

  @nest .root:hover & {
    transition-duration: 0.1s;
    opacity: 100;
  }
}

.metaInner {
  padding: 0.5em;
}

.placeholder {
  height: 100%;
  width: 100%;
  background-image: linear-gradient(
    90deg,
    color(var(--text-color) a(10%)),
    color(var(--text-color) a(5%)) 10%,
    color(var(--text-color) a(10%))
  );

  @nest & .media {
    x: 0;
    y: 0;
    height: 100%;
    width: 100%;
  }
}