@use "sass:math";
@use "../../../styles/tools/convert";
@use "../../../styles/tokens/base";
@use "../../../styles/tokens/color";
@use "../../../styles/tokens/space";

@layer components {
  .expander {
    margin-bottom: space.get("large");
    font-size: convert.to-rem(18px);

    summary {
      font-weight: 700;
      line-height: normal;
      display: flex;
      align-items: center;

      &::marker {
        content: "";
      }
      // Hide on Safari
      &::-webkit-details-marker {
        display: none;
      }

      &:hover {
        cursor: pointer;
        color: var(--color-text-accent);
      }
    }

    &__summary,
    &__summary--opened {
      gap: space.get("xsmall");
      display: block;
    }

    &__summary {
      display: flex;
      align-items: center;
    }

    &__summary--opened {
      display: none;
    }

    &--fullwidth {
      .expander__summary {
        width: 100%;
        justify-content: space-between;
      }
    }

    &--placement-top {
      &[open] {
        display: flex;
        flex-direction: column-reverse;

        summary {
          margin-top: space.get("large");
          margin-bottom: 0;
        }
      }
    }

    &[open] {
      svg[data-summary-icon] {
        transform: rotate(180deg) !important;
      }

      summary {
        margin-bottom: space.get("large");
      }

      .expander__summary:has(+ .expander__summary--opened) {
        display: none;
      }

      .expander__summary--opened {
        display: flex;
        align-items: center;
      }
    }
  }
}