@use '../variables/variables' as *;


.p-violations__header,
.p-violations__noise-selectors,
.p-violations__body {
  margin-bottom: 2rem;
}

.p-violations__header-hint {
  color: $theme-color__primary-1--700;
}

.p-violations__noise-selectors-container {
  border: 0;
}

.p-violations__grid {
  max-width: 100%;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-around;
  flex-direction: row;
}

.p-violations__grid-item {
  position: relative;
  width: $width__grid-item;
  flex-grow: 0;
  flex-shrink: 1;
  height: $height__grid-item;
  background-color: $theme-color__nearWhite;
  margin: $margin__grid-item--vertical $margin__grid-item--horizontal;
}

@media screen and (max-width: $min-width__main-content) {
  .p-violations__grid {
    flex-direction: column;
  }
  .p-violations__grid-item,
  .p-violations__header-hint {
    width: 100%;
  }
}

.p-violations__grid-item-content--low-contrast-text {
  color: yellow;
}

.p-violations__grid-item-content--radio-items {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;

  input {
    float: left;
    margin-right: 1em;
  }
}
//.p-violations__grid-item-content--radio {
//  flex-shrink: 0;
//
//  input {
//    float: left;
//  }
//}
