@import '../../index.less';
@import '~antd/es/style/themes/default.less';

@prefix: ~'@{bigscreen-prefix}-that-day-info';
@col-left: 30;

.@{prefix} {
  padding-top: calc(180/@bigscreen-base-height * 100vh);

  .col {
    padding-left: calc(@col-left/@bigscreen-base-width * 100vw);
    padding-right: calc((@col-left*2)/@bigscreen-base-width * 100vw);
    display: inline-block;
    width: 25%;

    &:last-child {
      padding-right: calc(@col-left/@bigscreen-base-width * 100vw);
    }

    div {
      text-align: center;

      &.title {
        margin-bottom: calc(26/@bigscreen-base-height * 100vh);
      }

      &.todayValue {
        font-size: calc(90/@bigscreen-base-width * 100vw);
        height: calc(142/@bigscreen-base-height * 100vh);
        line-height: $height;
        font-family: 'DS-DIGI-NORMAL';
        color: @digi-color;
        background-color: rgba(0, 0, 0, 15%);

        div {
          width: 90%;
          margin: 0 auto;
          overflow: hidden;

          .unit {
            font-size: calc(40/@bigscreen-base-width * 100vw);
          }
        }
      }

      &.yesterdayValue {
        margin-top: calc(10/@bigscreen-base-height * 100vh);

        .value {
          .no-wrap();
        }
      }
    }
  }
}