@import '../../marketplace.css';

.root {

}

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

  @media (--viewportLarge) {
    flex-direction: row;
    max-width: 1156px; /* 1060 + (paddingLeft + paddingRight) */
    margin: 0 auto 60px;
    padding: 0 48px;
  }
}

.nowrap {
  white-space: nowrap;
}

.imageWrapperMobile {
  /* Layout */
  display: block;
  width: 100%;
  position: relative;

  @media (--viewportLarge) {
    display: none;
  }
}

.aspectWrapper {
  padding-bottom: 66.6667%; /* 3:2 Aspect Ratio */
  background-color: var(--matterColorNegative); /* Loading BG color */
}

.aspectWrapperMobile {
  @media (--viewportLarge) {
    display: none;
  }
}

.aspectWrapperDesktop {
  display: none;

  @media (--viewportLarge) {
    display: block;
  }
}

.rootForImage {
  /* Layout - image will take space defined by aspect ratio wrapper */
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
}

.info {
  @media (--viewportLarge) {
    margin-right: 132px;
    max-width: 519px;
  }
}

.title {
  margin: 22px 24px 0 24px;

  @media (--viewportMedium) {
    max-width: 80%;
  }

  @media (--viewportLarge) {
    max-width: 100%;
    margin: 40px 0 0 0;
  }
}

.message {
  margin: 24px 24px 0 24px;

  @media (--viewportLarge) {
    margin: 31px 0 0 0;
    line-height: 32px;
  }
}

.error {
  color: var(--failColor);
  margin-left: 24px;
  margin-right: 24px;

  @media (--viewportMedium) {
    margin: 0;
  }
}

.errorMobile {
  margin-top: 24px;

  @media (--viewportMedium) {
    display: none;
  }
}

.errorDesktop {
  display: none;

  @media (--viewportMedium) {
    display: block;
    position: absolute;
    bottom: 80px;
  }
}

.avatarMobile {
  /* Position (over the listing image)*/
  margin-top: -31px;
  margin-left: 24px;

  /* Bring on top of image */
  position: relative;

  @media (--viewportLarge) {
    display: none;
  }
}

.avatarDesktop {
  display: none;

  @media (--viewportLarge) {
    display: flex;
    margin-top: 121px;
  }
}

.breakdownContainerMobile {
  margin: 0 24px 122px 24px;

  @media (--viewportLarge) {
    display: none;
  }
}

.breakdownContainerDesktop {
  display: none;

  margin: 119px 24px 24px 24px;

  @media (--viewportLarge) {
    display: block;
    margin: 116px 0 0 0;
    background-color: var(--matterColorLight);
    border: 1px solid var(--matterColorNegative);
    border-radius: 2px;

    width: 409px;
  }
}

.breakdownImageWrapper {
  /* Layout */
  display: block;
  width: 100%;
  position: relative;
}

.breakdownTitleMobile {
  /* Font */
  color: var(--matterColorAnti);

  margin: 47px 0 14px 0;
}

.breakdownTitleDesktop {
  margin: 48px 48px 50px 48px;
  color: var(--matterColorAnti);
}

.breakdownDesktop {
  margin: 48px;
}

.actionButtons {
  position: fixed;
  bottom: 0;
  width: 100%;
  padding: 18px 24px 18px 24px;

  display: flex;

  /* Contain repainting to this component only */
  /* 3D painting container helps scrolling */
  transform: translate3d(0,0,0);

  box-shadow: var(--boxShadowTop);
  background-color: white;

  @media (--viewportLarge) {
    position: static;
    box-shadow: none;
    width: auto;
    margin: 104px 0 0 0;
    padding: 0;
  }
}

.rejectButton {
  margin-right: 6.5px;
}

.acceptButton {
  margin-left: 6.5px;
}
