/**
 * @file
 * Styling for likert elements with unique answers.
 */

/*
 * The theme's #828282 form label misses WCAG AA (3.5:1 on white). The class
 * sits on the element wrapper as well as on the table, and only the wrapper
 * has a label child. Doubling the class and repeating the theme's :not()
 * keeps this above ".page-wrapper form label:not(.option)".
 */
.webform-likert-unique.webform-likert-unique > label:not(.option) {
  color: #333;
}

/*
 * The row title (e.g. "WS 1") is the option to pick, its description holds the
 * details. Doubling the table class keeps this above the theme's generic
 * "form label" rule.
 */
.webform-likert-table.webform-likert-unique td:first-child label {
  font-weight: 700;
  color: #000;
}

/*
 * The description carries the actual option text here, so the theme's light
 * grey (#9e9e9e, 2.6:1 on white) is both hard to read and below WCAG AA.
 */
.webform-likert-table.webform-likert-unique td:first-child .webform-element-description {
  color: #333;
}

/*
 * The circles are drawn on the label's ::before; the theme's #e0e0e0 ring is
 * barely visible and misses the 3:1 WCAG minimum for controls. Repeating the
 * table classes and naming the cell outbids the theme's
 * ".page-wrapper input[type='radio']:checked + label:before".
 * box-sizing keeps the outer diameter at the theme's 24px.
 */
.webform-likert-table.webform-likert-unique td input[type="radio"] + label::before {
  box-sizing: border-box;
  width: 24px;
  height: 24px;
  border: 1px solid #333;
}

/* Checked circles keep the theme's blue. */
.webform-likert-table.webform-likert-unique td input[type="radio"]:checked + label::before {
  border: 1px solid #0460c1;
}

/*
 * Extended text per question. The wrapper holds toggle and panel so that the
 * panel stays reachable with the mouse while it is open.
 */
.webform-likert-help {
  position: relative;
  display: block;
  margin: 8px 0 0;
}

/*
 * The theme styles form buttons heavily, so every relevant property is set
 * explicitly. min-height keeps the touch target usable on mobile.
 */
.webform-likert-help__toggle {
  display: inline-block;
  min-height: 32px;
  margin: 0;
  padding: 5px 12px;
  border: 1px solid #333;
  border-radius: 4px;
  background: #fff;
  color: #333;
  font-family: inherit;
  font-size: 14px;
  line-height: 1.4;
  text-align: left;
  cursor: pointer;
}

.webform-likert-help__toggle:hover,
.webform-likert-help__toggle[aria-expanded="true"] {
  background: #333;
  color: #fff;
}

.webform-likert-help__panel {
  margin: 8px 0 0;
  padding: 12px 16px;
  border: 1px solid #333;
  background: #fff;
  color: #333;
  font-size: 14px;
  line-height: 1.5;
}

.webform-likert-help__panel[hidden] {
  display: none;
}

.webform-likert-help__panel > *:first-child {
  margin-top: 0;
}

.webform-likert-help__panel > *:last-child {
  margin-bottom: 0;
}

/*
 * From tablet up the panel floats above the table instead of pushing the row
 * apart. Below that it stays in the flow, which avoids any clipping and
 * positioning guesswork on small screens.
 */
@media (min-width: 768px) {
  /*
   * The width and a height cap are set by placePanel() in the JS: the question
   * column is far too narrow for the long texts editors paste in, so the panel
   * spans the whole table. The values here only apply when the JS is missing.
   */
  .webform-likert-help__panel {
    position: absolute;
    z-index: 20;
    top: 100%;
    left: 0;
    width: 320px;
    max-height: 60vh;
    overflow-y: auto;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  }

  /*
   * Transparent bridge across the gap between toggle and panel. Without it
   * the pointer leaves the wrapper on its way down and the panel closes
   * before a link inside it can be reached. It sits on the toggle rather than
   * on the panel so that it never covers the answer columns.
   */
  .webform-likert-help__toggle {
    position: relative;
  }

  .webform-likert-help__toggle[aria-expanded="true"]::after {
    content: "";
    position: absolute;
    top: 100%;
    right: 0;
    left: 0;
    height: 10px;
  }

  /* Not enough room below the toggle — see placePanel() in the JS. */
  .webform-likert-help--above .webform-likert-help__panel {
    top: auto;
    bottom: 100%;
    margin: 0 0 8px;
  }

  .webform-likert-help--above .webform-likert-help__toggle[aria-expanded="true"]::after {
    top: auto;
    bottom: 100%;
  }
}