.details{
  display: block;
  margin-bottom: map-get($spacers, 6);

  // Remove the default details marker so we can style our own consistently and
  // ensure it displays in Firefox (see implementation.md for details)
  .details-summary::-webkit-details-marker {
    display: none;
  }

  &[open] {
    .details-summary {
      margin-bottom: map-get($spacers, 3);
      &:before {
        display: block;
        width: 0;
        height: 0;
        border-style: solid;
        border-color: transparent;
        -webkit-clip-path: polygon(0% 0%, 50% 100%, 100% 0%);
        clip-path: polygon(0% 0%, 50% 100%, 100% 0%);
        border-width: 12px 7px 0 7px;
        border-top-color: inherit;
      }
    }
  }

  .details-summary {
    display: inline-block;
    position: relative;
    color: $color-black;
    cursor: pointer;

    &:before {
      content: "";
      position: absolute;
      top: -1px;
      bottom: 0;
      left: 0;
      margin: auto;
      display: block;
      width: 0;
      height: 0;
      border-style: solid;
      border-color: transparent;
      -webkit-clip-path: polygon(0% 0%, 100% 50%, 0% 100%);
      clip-path: polygon(0% 0%, 100% 50%, 0% 100%);
      border-width: 7px 0 7px 12px;
      border-left-color: inherit;
    }

    &:focus{
      outline: $focus-outline;
      outline-offset: 1px;
    }
    .details-summary-text {
      text-decoration: underline;
      margin-left: calc(#{map-get($spacers, 4)} + 4px);
    }
  }

  .details-text {
    padding: map-get($spacers, 4);
    border-left: 4px solid $color-gray-light;
    &[aria-hidden=true]{
      display: none;
    }
    p{
      margin-top: 0;
      margin-bottom: 1.6rem;
    }

    & > :last-child{
      margin-bottom: 0;
    }
  }
}