/*
 * Accordion: native <details>/<summary>, so it opens with the keyboard and
 * without JavaScript.
 *
 *   <div class="yb-accordion">
 *     <details>
 *       <summary>Kellele mõeldud?</summary>
 *       <div class="yb-accordion__body"><p>…</p></div>
 *     </details>
 *   </div>
 */
.yb-accordion details {
  padding: 32px 0;
  border-bottom: 1px solid var(--yb-color-border);
}

.yb-accordion details:first-child {
  padding-top: 0;
}

.yb-accordion summary {
  position: relative;
  display: block;
  min-height: 30px;
  padding-right: 40px;
  color: var(--yb-color-primary);
  font-size: 26px;
  font-weight: var(--yb-weight-medium);
  line-height: var(--yb-leading-tight);
  list-style: none;
  cursor: pointer;
}

.yb-accordion summary::-webkit-details-marker {
  display: none;
}

.yb-accordion summary::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 0;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--yb-color-surface) center / 14px no-repeat;
  background-image: linear-gradient(var(--yb-color-primary), var(--yb-color-primary)), linear-gradient(var(--yb-color-primary), var(--yb-color-primary));
  background-size: 14px 1.5px, 1.5px 14px;
  transform: translateY(-50%);
}

.yb-accordion details[open] summary::after {
  background-size: 14px 1.5px, 0 0;
}

.yb-accordion__body {
  padding-top: var(--yb-space-m);
}

.yb-accordion__body ul {
  margin-bottom: 0;
}

@media (max-width: 1024px) {
  .yb-accordion summary {
    font-size: 18px;
  }
}

@media (max-width: 767px) {
  .yb-accordion summary {
    font-size: 17px;
  }

  .yb-accordion details {
    padding: 24px 0;
  }
}