// Height of Heading and Chevron.
// Increase to get space around details closed.

// @todo: does not work for longer titles, rethink variable maths
$line-height-details-header: 2.2;

.details-title {
  @extend %h2;

  display: inline-block;
  width: calc(100% - 2 * var(--font-size-icon));
  margin: 0;
  padding-top: 0.5rem;
  padding-bottom: 0.75rem;
  color: inherit;

  // line-height: $line-height-details-header;
  line-height: inherit;
}

details {
  width: 100%; // Required by ff.
  margin-right: $grid-gutter;
  margin-left: $grid-gutter; // form has no padding, see form.scss
  padding: 0;
  border: 0;
  border-top: 1px solid $color-divider-light;

  // Reverting form-wrapper default.
  &.form-wrapper {
    margin: 0;

    &:last-of-type {
      // border-bottom: 0;
      padding-bottom: 0.5rem;
    }
  }

  // Keep distance from non-details elements.
  &:last-of-type {
    margin-bottom: $grid-gutter;
    border-bottom: 1px solid $color-divider-light;
  }

  > summary {
    @include icon(chevron-down, fas, before);

    position: relative;
    padding: 0;
    list-style: none;

    // Disable default marker element on webkit browsers.
    &::-webkit-details-marker {
      display: none;
    }

    // Chevron  ▲ and ▼.
    &::before {
      float: right;
      margin-top: 0.1em;
      padding: 0 0.5em;
      transition: transform 300ms ease;
      border-radius: $button-border-radius;
      font-size: $font-size-icon;
      line-height: (0.9 * $line-height-details-header);
      @include breakpoint(m) {
        // h2.details-title is responsive at breakpoint.
        margin-top: 0.25em;
      }
    }

    &:focus::before,
    &:hover::before {
      color: $color-text-inverted;
      background: $color-interaction;
    }

    &:active::before {
      color: $color-interaction;
      outline: $outline-active;
      background: transparent;
    }

    &:focus,
    &:hover {
      color: $color-interaction;
    }

    &.form-required {
      &::after {
        position: absolute;
        top: 0.5rem;
        right: 3rem;
        font-size: $font-size-l;
      }

      h2 {
        &::after {
          content: "*";
          color: $color-danger;
        }
      }
    }
    @media (prefers-reduced-motion: reduce) {
      &::before {
        transition-duration: 10ms;
      }
    }
  }

  &[open] {
    > summary::before {
      transform: rotate(-180deg);
    }
  }

  .details-wrapper {
    margin: 0;
    padding: $grid-gutter 0 (2 * $grid-gutter);
  }
}

details {
  .node details {
    margin-bottom: 0;
    padding-bottom: 0;
    &.form-wrapper:last-of-type {
      padding-bottom: 0;
      border-bottom-width: 0;
    }
  }

  // Nested details, e. g. FAQ

  details {
    width: calc(100% - (2.5 * $grid-gutter));
    margin: 0 (2 * $grid-gutter) 0 0;
    border-bottom-width: 0;

    &:last-of-type {
      border-bottom-width: 0;
    }

    > summary::before {
      font-size: var(--font-size-default);
    }

    .details-title {
      @extend %h3;

      // font-family: var(--font-family-sans-serif);
      // font-size: var(--font-size-default);
      // color: var(--color-interaction);
      // font-weight: bold;
      // padding-top: .666rem;
    }

    .details-wrapper {
      padding-top: 0;
      padding-right: (2 * $grid-gutter);
    }
  }
}

.faq details {
  margin-block: 0;
}

.legal-login {
  details .details-wrapper {
    padding-bottom: 0;
  }
}

// Views exposed forms, secondary options
details.bef--secondary {
  border-width: 0 0 1px;

  > summary .details-title {
    margin-right: 1rem;
    text-align: right;
    font-family: $font-base;
    font-size: $font-size-default;
  }

  > summary::before {
    font-size: $font-size-default;
  }
}

// Facets

.block-facets details {
  margin-top: 0;
  margin-bottom: 0;
  padding-top: 1rem;
  border-width: 0 0 1px;

  > summary.h4 {
    &::before {
      font-size: var(--font-size-default);
      @include breakpoint(m) {
        margin-top: -0.333rem;
      }
    }
  }

  ul {
    margin-top: $grid-gutter;
  }
}
