@use "../../../styles/int.scss";

.container {
  width: 100%;
  text-align: center;
  margin: 0 auto;
}

.leaderboard,
.leaderboard-320 {
  padding: int.$spacing-8 0;
}

.disclaimer {
  margin: int.$spacing-1 auto 0;
  text-transform: uppercase;
  color: int.$coolgray-60;

  @include int.sans($size: "100", $role: "label") {
    font-size: 12px;
  }
}

.placeholder {
  display: none;

  &.active {
    display: block;
  }
}

.placeholder-box {
  width: 300px;
  height: 250px;
  margin: 5px auto 0;
  background-color: int.$coolgray-10;
}

.placeholder-rect {
  width: 600px;
  max-width: 100%;
  height: 90px;
  margin: 5px auto 0;
  background-color: int.$coolgray-10;
}

.placeholder-leaderboard-320 {
  height: 50px;
}

.mount.active {
  &.mount-box {
    min-height: 255px;
  }

  &.mount-rect {
    min-height: 95px;
  }

  &.mount-leaderboard {
    @include int.breakpoint-at-most("sm") {
      min-height: 55px;
    }
  }

  &.mount-leaderboard-320 {
    min-height: 55px;
  }
}
