/**
 * @file
 * Likert element styles.
 *
 * @see /webform/test_element_likert
 */

/**
 * Answer column widths.
 */
[data-likert-answers-count="2"] th {
  width: 30%;
}
[data-likert-answers-count="3"] th {
  width: 20%;
}
[data-likert-answers-count="4"] th {
  width: 15%;
}
[data-likert-answers-count="5"] th {
  width: 12%;
}
[data-likert-answers-count="6"] th {
  width: 10%;
}
[data-likert-answers-count="7"] th {
  width: 8.57%;
}
[data-likert-answers-count="8"] th {
  width: 7.5%;
}
[data-likert-answers-count="9"] th {
  width: 6.66%;
}
[data-likert-answers-count="10"] th {
  width: 6%;
}

/**
 * Basic table formatting.
 */
.webform-likert-table th,
.webform-likert-table td {
  text-align: center;
}

/**
 * Hide radio title and description when Likert is displayed within a
 * grid on desktop.
 * @see \Drupal\webform\Element\WebformLikert::processWebformLikert
 */
.webform-likert-label,
.webform-likert-description {
  display: none;
}

.webform-likert-table th:first-child,
.webform-likert-table td:first-child {
  text-align: inherit;
  width: 40%;
}

.form-type-webform-likert td:first-child label {
  display: block;
}

/**
 * Mobile support to likert webform element that converts radios in table
 * grid to inline vertical radios.
 */
@media (max-width: 768px) {
  .form-type-webform-likert table {
    border-collapse: collapse;
    font-size: inherit;
  }

  .form-type-webform-likert thead {
    display: none;
  }

  .form-type-webform-likert tr,
  .form-type-webform-likert tr.odd {
    border: 0;
    background: transparent;
  }

  .form-type-webform-likert td {
    display: block;
    border: 0;
    background: transparent;
    padding: 0;
    text-align: inherit;
  }

  .webform-likert-table[data-likert-answers-count] th,
  .webform-likert-table[data-likert-answers-count] th:first-child,
  .webform-likert-table td,
  .webform-likert-table td:first-child {
    width: 100%;
  }

  /**
   * Show radio title and description when Likert is displayed inline on mobile.
   * @see \Drupal\webform\Element\WebformLikert::processWebformLikert
   */
  .webform-likert-label {
    display: inline;
  }

  .webform-likert-description {
    display: block;
  }

  .form-type-webform-likert td:last-child {
    margin-bottom: 1em;
  }
}