/**
 * @file
 * Srai details.
 *
*/

details {
  margin-bottom: 1em;
  padding-left: 10px;
  border: 1px solid var(--srai-white);
  border-radius: 0.5rem;
  min-height : 35px;
  overflow: visible;
}
details > .details-wrapper {
  box-sizing: border-box;
  padding: 0.5em 1.5em;
  overflow: visible; /* Make visible content to be visible as select*/
  border-color: var(--srai-light-blue);
}

/* @todo Regression: The summary of uncollapsible details are no longer
     vertically aligned with the .details-wrapper in browsers without native
     details support. */
summary {
  outline: none !important;
  align-items: baseline;
  font-size: 20px;
  display: block;
}

details > summary {
  background: url('../../images/icons/expand-more-black-24dp.svg') no-repeat var(--srai-light-blue);
  background-position: 98%;
}

details[open] > summary {
  background: url('../../images/icons/expand-more-black-inverted-24dp.svg') no-repeat var(--srai-light-blue);
  background-position: 98%;
}

/* Uncollapsible details */
details[data-collapsible="0"] > summary {
  background: var(--srai-light-blue);
}