/**
 * @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: 740px) {
    .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;
    }
  }