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

$sidePanelLabelFontColor: #171716;

@mixin sidePanelLabelStyle {
  font-size: medium;
  color: $sidePanelLabelFontColor;
  font-weight: 600;
}

.versionInfo {
  padding: 2rem 1rem 2rem 1.2rem;
  text-align: center;
  font-size: medium;
  color: #A0A3A3;
}

.areaDetailContainer {
  display: flex;
  flex-direction: column;
}

.categorization {
  display: flex;
  flex-direction: column;
  align-items: center;
  // @include u-padding-bottom(3);

  .isInFocus {
    padding: .5rem 1rem .25rem 1.2rem;
    font-size: small;
    font-weight: bold;
    @include u-margin-top(2);
  }

  .communityOfFocus {
    display: flex;

    h3 {
      margin-top: 0;
      margin-bottom: 0;
    }

  }

  .prioCopy{
    @include u-padding-left(2);
    @include u-padding-right(2);
    @include u-padding-top(2);

  }

  .showCategoriesExceed {
    font-size: small;
    @include u-margin-top('05');
  }

}

.sendFeedbackLink {
  @include u-margin-top(2);
  @include u-margin-left(2);
  @include u-margin-bottom(2);

  .sendFeedbackBtn{
    @include u-text("blue-70v");
    @include u-bg("yellow-20v");
    height: 40px;

    &:hover {
      @include u-bg("yellow-20");
      @include u-text("gray-90");
    }

    .buttonContainer{
      display: flex;

      .buttonText{
        @include u-margin-right(1);
      }
    }
  }
}

//Census row styles
.censusRow {
  display: flex;
  flex-direction: column;
  list-style: none;
  margin: 0;
  padding: 1.2rem 1rem 0 1.2rem;

  .censusLabel {
    @include sidePanelLabelStyle;
  }

  .censusText {
    font-size: medium;
  }
}

.categoryHeader {
  display: flex;
  justify-content: space-between;
  text-transform: uppercase;
  font-size: small;
  @include u-bg('gray-cool-5');
  @include u-padding-left(2.5);
  @include u-padding-right(2);
}

.categorySpacer {
  @include typeset('sans', '2xs', 2);
  @include u-text('bold');

  margin-left: -20px;
  @include u-padding-top(1);
  @include u-padding-bottom(1);
  @include u-padding-left(2.5);
}

.testSignals{
  padding-left: 1rem;
  padding-bottom: 1rem;
}