@use '../../styles/design-system.scss' as *;
@import "../utils.scss";

@mixin indicatorPadding {
  @include u-padding-left("05");
  @include u-padding-right("05");
}

@mixin indicator {
  display: flex;
  flex-direction: column;
  @include u-padding-top(1.5);
  @include u-padding-bottom(1.5);
  
  .indicatorRow {
    display: flex;
    justify-content: space-between;
    
    @media screen and (max-width: $mobileBreakpoint) {
      flex: 1 0 40%;
      align-self: inherit;
      padding-left: 3rem;
      padding-top: 1rem;
    }
    
    .indicatorName {
      flex-basis: 55%;
      display: flex;
      flex-direction: column;
      @include typeset('sans', '2xs', 2);
      @include u-text('bold'); 
      
      .indicatorDesc {
        @include typeset('sans', '3xs', 2); 
        @include u-text('thin'); 
        max-width: 12rem;    
        @include u-margin-top(0);
        @media screen and (max-width: 1024px) {
          max-width: 80%;
        }
      }
    }
    
    .indicatorValueCol {
      display: flex;
      flex-direction: column;
      @include typeset('sans', '2xs', 2);
      @include u-text('bold'); 
      width: 40%;

      .indicatorValueRow {
        display: flex;
        align-self: end;

        .indicatorValue {
          @include indicatorPadding();
        }
        
        .disIndicatorValue {
          @include indicatorPadding();
          color: white;
          background-color: $disadvantagedDotColor;
        }

        .indicatorInfo {
          margin-bottom: -.375rem;
          margin-top: -2px;
          @include u-margin-right('05');

          img.info {
            max-width: none;
            height: 1.2rem;
            width: 1.2rem;
          }

          .infoTilde {
            vertical-align: super;
          }
        }
      }
      
      .indicatorValueSubText{
        @include indicatorValueSubTextContainer();
      }
    }

  }
}

//Indicator box styles
.indicatorBoxMain {
  @include indicator;
  @include u-color('gray-warm-90');
}