details.accordion>summary {
  margin: 2px 0 0 0;
  padding: .5em .5em .5em .7em;
  cursor: pointer;
  user-select: none;
  display: block;

  border-top-right-radius: 3px;
  border-top-left-radius: 3px;
}

details[open].accordion>summary {
  border: 1px solid #003eff;
  background: #007fff;
  color: #ffffff;
}


details:not([open]).accordion>summary {
  border-bottom-right-radius: 3px;
  border-bottom-left-radius: 3px;

  border: 1px solid #c5c5c5;
  background: #f6f6f6;
  color: #454545;
}

details.accordion>summary::before {
  font-family: FontAwesome;
  content: '\f0da';
  margin-right: 5px;
  transition: 700ms;
  font-size: 0.8em;
}

details[open].accordion>summary::before {
  font-family: FontAwesome;
  content: '\f0d7';
}

details.accordion>.accordion-content {
  background: #ffffff;
  color: #333333;
  padding: 1em 2.2em;
  border: 1px solid #dddddd;
  border-bottom-right-radius: 3px;
  border-bottom-left-radius: 3px;
  overflow: hidden;
}

@mixin animation($selector) {
  details.accordion#{$selector} {
    opacity: 0;

    @supports (max-height: calc-size(max-content, size)) {
      max-height: 0px;
    }
  }

  details[open].accordion#{$selector} {
    opacity: 1;

    // Setting a transition on all states of the content
    // will create a strange behavior where the transition
    // continues without being shown, creating inconsistenties
    transition: all 300ms ease-out;

    @supports (max-height: calc-size(max-content, size)) {
      max-height: calc-size(max-content, size);
    }
  }
}

// ::details-content isn't available on firefox yet
// we use .accordion-content as a workaround
// But we need to use ::details-content for chrome because it's
// not working correctly otherwise
// it only happen in chrome, not safari or firefox
// Note: `selector` is not supported by scss so we comment it out to
// avoid compiling it and sending it straight to the css
// This is a trick that comes from here :
// https://stackoverflow.com/questions/62665318/using-supports-selector-despite-sass-not-supporting-it
@supports #{'selector(details::details-content)'} {
  @include animation("::details-content")
}

@supports #{'not selector(details::details-content)'} {
  @include animation(">.accordion-content")
}