// ============================================================================
// Components | Summary
// ============================================================================

@use "../../dev" as *;
@use "../../variables" as *;

@use "../head_layout" as *;

@use "../soul_type" as *;

/// Base styles for the `<details>` element
/// @group Summary
@mixin summary--details {
    display: block;
}

/// Base styles for the `<summary>` element
/// @group Summary
@mixin summary--base {
    display: flex;
    outline: none;
    list-style: none;
    cursor: pointer;
}

/// Hides browser default disclosure arrows
/// @group Summary
@mixin summary--hide-default-icon {
    details > summary::marker,
    summary::marker,
    details summary::-webkit-details-marker,
    details > summary::-webkit-details-marker {
        display: none;
    }
}

/// Combined mixin for summary + details
/// @group Summary
@mixin summary--widget {
    @include summary--details;
    @include summary--base;
    @include summary--hide-default-icon;
}

.details {
    @include summary--details;
}

.summary {
    @include summary--base;
    @include summary--hide-default-icon;
}

/// Styling for the `<details>` element.
/// The `<details>` element represents a disclosure widget from which the user can obtain additional information.
/// @group Summary
details {
    @include summary--details;
    // display: block; /* Render the `details` element consistently across browsers. */
}

/// Styling for the `<summary>` element within `<details>`.
/// The `<summary>` element is used as a summary or caption for the details content.
/// @group Summary
summary {
    @include summary--base;
    @include summary--hide-default-icon;
    // display: flex; /* Ensure the correct display in all browsers. */
    // outline: none; /* Remove the default outline for better customization. */
    // list-style: none; /* Hide the default list marker. */
    // cursor: pointer; /* Change cursor to indicate interactiveness. */
}

// /// Additional rules to hide default summary markers across different browsers.
// /// These rules ensure that the default arrow markers are hidden to allow for custom styling.
// /// @group Summary
// details > summary::marker,
// summary::marker,
// details summary::-webkit-details-marker,
// details > summary::-webkit-details-marker {
//     display: none; /* Hide the default marker for a cleaner appearance. */
// }