/*------------------------------------*\
    DETAILS
\*------------------------------------*/
@use "sass:math";
@use "../../base/helpers";
@use "../../base/settings";

$details-border-width: 0.25rem;
$details-icon-size: math.div((1em * 8px), settings.$root-font-size--medium);

.ds_details {
    @include helpers.ds_block-margins;
}

.ds_details__summary {
    cursor: pointer;
    display: inline-block;
    position: relative;
    @include helpers.ds_link;
    @include helpers.ds_responsive-padding(4, left);

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

    &::before {
        background-color: currentColor;
        clip-path: polygon(0 0, 100% 50%, 0 100%);
        content: '';
        display: block;
        height: calc(#{$details-icon-size} * 2);
        left: 0.25em;
        position: absolute;
        top: calc(50% - #{$details-icon-size} + 0.0625rem); // 1px magic number for optical alignment in preference to mathematic alignment
        width: $details-icon-size;

        @media (prefers-reduced-motion: no-preference) {
            transition: transform settings.$transition-in-time;
        }
    }
}

.ds_details__text {
    @include helpers.ds_last-child-no-margin;
    border-left: $details-border-width solid #b3b3b3;
    box-sizing: border-box;
    display: none;
    @include helpers.ds_responsive-margin(2, top);
    @include helpers.ds_responsive-padding(1);
    @include helpers.ds_responsive-padding(4, left, false, calc(#{$details-border-width} * -1));
}

.ds_details[open],
.ds_details__toggle:checked ~ {
    .ds_details__summary::before {
        transform: rotate(90deg);
    }

    .ds_details__text {
        display: block;
    }
}

.ds_details__toggle:focus ~ .ds_details__summary {
    @include helpers.ds_focus;
}

@include helpers.ds_media-query-high-contrast {
    .ds_details__summary {
        color: linktext !important;
    }

    .ds_details__summary::before {
        background-color: linktext !important;
    }
}