@use "./../variables" as *;
@use "./../mixins/caret" as *;

details {
  transition: $details-transition;

  // $details-margin-fallback: if(sass($enable-margins): var(--spacer); else: 0);
  $details-margin-fallback: if(
    sass($enable-margins): var(--spacer) ; else: 0
  );

  margin-bottom: var(--details-margin-bottom, #{$details-margin-fallback});

  & summary {
    position: relative;
    list-style: none;
    padding-left: calc(var(--spacer) * 1.5);

    @include make-caret-down($left: true, $color: "primary");

    &:focus {
      outline: none;
    }

    &::marker {
      color: transparent;
      display: none;
    }

    &::-webkit-details-marker {
      display: none;
    }

    &.card__header {
      padding-left: calc(var(--spacer) * 2) !important;

      &::before {
        left: calc(var(--spacer) * 0.75);
      }
    }
  }

  &[open] {
    height: auto;
    overflow: clip;

    & summary {
      @include make-caret-up($left: true, $color: "primary");
    }
  }
}