@import '~riotclient-lol-asset-csslib/styles/typekit';
@import '~riotclient-lol-asset-csslib/styles/color-palette';

.honor-day-one-component {
  width: 824px;
  height: 600px;
  text-align: center;
  background-image: url('/fe/lol-honor/assets/dayOne/Honor_FirstDayModal_WindowBackdrop.png');

  .position1 {
    left: 48px;
  }

  .position2 {
    left: 302px;
  }

  .position3 {
    left: 556px;
  }
}

.honor-day-one-title-backdrop {
  position: absolute;
  top: 0;
  left: 0;
}

.honor-day-one-divider {
  position: absolute;
  top: 194px;
  left: 0;
}

.honor-day-one-image {
  position: absolute;
  top: 260px;
  width: 220px;
}

.honor-day-one-header {
  @extend $typekit_h2;
  position: absolute;
  width: 100%;
  top: 88px;
}

.honor-day-one-column-header {
  @extend $typekit_h4;
  font-size: 16px;
  position: absolute;
  top: 244px;
  width: 220px;
  color: $color_palette_gold5;
}

.honor-day-one-column-subheader {
  @extend $typekit_text_s;
  @extend $text-transform-uppercase;
  position: absolute;
  top: 360px;
  width: 220px;
  color: $color_palette_grey_disabled;
  font-weight: 700;
}

.honor-day-one-column-body {
  @extend $typekit_text_m;
  position: absolute;
  top: 390px;
  width: 220px;
  text-align: left;
}