@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'); }