/* DisplayTools component styles */

@import '../../../styles/shared.css';

.name {
  font-size: rem(34px);
  font-weight: 400;
  line-height: 1.4;
  margin: 0.5em 0 0;
  text-align: center;
}

.secondary {
  color: var(--grey);
  font-size: rem(15px);
  font-weight: 300;
  text-align: center;
}

.dimensionsForm {
  display: flex;
  justify-content: space-around;
  margin: 20px auto;
}

.dimensions {
  font-size: rem(12px);

  label {
    font-weight: 700;
    margin-right: 0.5em;
  }

  label,
  input {
    display: inline-block;
  }

  input {
    border-radius: 4px;
    width: 60px;
  }
}

.directLink {
  font-size: rem(12px);
  line-height: 1;
  margin-top: em(10px);
}

/* embed types without a preview player */
.detailWrapper {
  display: flex;
  justify-content: center;
}

.image {
  display: inline-block;
  height: auto;
  max-width: 200px;
  vertical-align: top;
}

.rightAside {
  display: inline-block;
  margin-left: em(20px);
  margin-top: em(10px);
  overflow-wrap: break-word;
}

.sidePrimary {
  @mixin line-clamp;
  font-size: rem(34px);
  height: auto;
  max-height: calc(1em * 1.2 * 2);
}

.sideSecondary {
  font-size: rem(15px);
}