/**
 * @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-wrapper th,
.webform-likert-table-wrapper td {
  text-align: center;
}

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

.webform-likert-table-wrapper 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.sticky-header {
    display: none;
  }

  .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 visually hidden radio title and description
   * when Likert is displayed inline on mobile.
   * @see \Drupal\webform\Element\WebformLikert::processWebformLikert
   * @see core/modules/system/css/components/hidden.module.css
   */
  .webform-likert-table .visually-hidden {
    position: inherit !important;
    clip: inherit;
    overflow: inherit;
    height: inherit;
    width: inherit;
  }

  .webform-likert-label.visually-hidden {
    display: inline;
  }

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

  .webform-likert-help.hidden {
    display: inline;
  }

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