@use 'sass:map';
@use '../../tools/breakpoint';
@use 'theme';

.Collapse {
    position: relative;
    height: 0;
    overflow: hidden;
    visibility: hidden;

    &.is-open,
    &.is-transitioning {
        visibility: visible;
    }

    &.is-transitioning {
        @media (prefers-reduced-motion: no-preference) {
            transition-property: height;
            transition-duration: theme.$collapse-transition-duration;
            transition-timing-function: theme.$collapse-transition-timing;
        }
    }

    &.is-open:not(.is-transitioning) {
        height: 100%;
        overflow: visible;
    }

    /* When it should be as a hidden inline element */
    &:is(span) {
        display: none;
    }

    @each $breakpoint-name, $breakpoint-value in theme.$breakpoints {
        @if $breakpoint-value > 0 {
            &[data-spirit-breakpoint='#{$breakpoint-name}'] {
                @include breakpoint.up(map.get(theme.$breakpoints, $breakpoint-name)) {
                    /* stylelint-disable declaration-no-important -- This Important rule is important here because it overrides inline styles applied by JavaScript */
                    height: auto !important;
                    /* stylelint-enable declaration-no-important */
                    visibility: visible;
                }
            }
        }
    }
}
