.accordion {
  position: relative;
  display: block;
  width: 100%;
  border: $accordion-border-width solid $accordion-border-color;
  border-top: none;

  details > summary {

    /* Specific reset for Safari WebKit */
    &::-webkit-details-marker { display: none; }

  }

  &.lined {
    border: none;
  }

  &-btn {
    display: inline-block;
    width: 100%;
    text-align: left;
    border: none;
    border-top: $accordion-border-width solid $accordion-border-color;
    border-radius: 0;
    cursor: pointer;
    color: $link-color;
    user-select: none;
    background-color: inherit;
    background-repeat: no-repeat;
    background-position: right $accordion-icon-padding-x center;
    background-image: url(icon-plus());
    background-size: $input-height-inner-half $input-height-inner-half;

    &.no-icon {
      background-image: none !important;
    }

    &.lined & {
      border-top: none;
      border-bottom: $accordion-border-width solid $accordion-border-color;

      &:last-of-type {
        border-bottom: none;
      }
    }

    &.opened {
      color: $accordion-btn-opened;
      background-image: url(icon-minus());
    }


    &:focus {
      outline: 0;
      box-shadow: $btn-focus-box-shadow;
    }
  }

}