@import '../helpers/color';

$border-grey: #c1cfd9;
$bg: #f5f6f1;

.radio-grid {

  .checkbox,
  .radio {
    display: flex;
    align-items: center;
  }

  .radio-grid-headings {
    position: sticky;
    top: 52px;
    z-index: 1;
    border-bottom: solid 1px $border-grey;
    background-color: $bg;

    .radio-grid-heading {
      word-wrap: break-word;
    }
  }

  .radio-grid-row {

    &:not(:last-child) {
      border-bottom: solid 1px $border-grey;
    }

    &:hover {
      background-color: $grey-500;
    }


  }

  .radio-grid-column {
    display: flex;
    justify-content: center;
    align-items: center;

  }

  .grid-column {
    display: flex;
    justify-content: center;
  }

  .radio-grid-textarea {
    .field-column {
      height: 100%;
      max-height: 300px;
    }

  }

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

  .is-flex-centered {
    display: flex;
    align-items: center;
  }

  .has-top-margin-1em {
    margin-top: 1em;
  }

}

@media (min-width: 768px) {

  .radio-grid-radio-label,
  .radio-grid-checkbox-label {
    display: none;
  }

}