@use "./abstracts/mixins" as *;
@use "./abstracts/vars" as *;
@use "./base/fontawesome/font-awesome-mix-var" as *;
@use "./base/animation/toggle" as animationToggle;

.toggle {
    details[open] summary:before {
        content: $fa-var-minus-square;
    }
    summary {
        list-style: none;
    }
    summary.toggle-header {
        &::-webkit-details-marker {
            display: none;
        }
        &::before {
            @include fa-icon();
            content: $fa-var-plus-square;
            position: absolute;
            font-size: 17px;
            left: 0;
            top: 50%;
            transform: translateY(-50%);
        }
        position: relative;
        vertical-align: middle;
        box-sizing: border-box;
        padding: 0 10px;
        background: $toggle-header-bg;
        cursor: pointer;
        min-height: 25px;
        &.show {
            display: inline-block !important;
        }
        .toggle-label {
            display: block;
            margin: 0 0 0 10px;
            p {
                margin-bottom: 0;
            }
        }
    }
    .show {
        color: $toggle-show-color;
    }
    .toggle-content {
        margin-top: -1px;
    }
    details summary ~ .component {
        > .component-content {
            animation-fill-mode: forwards;
            animation-iteration-count: 1;
            animation-delay: 0;
            animation-timing-function: linear;
            animation-direction: normal;
            display: none;
        }
    }
    details[open] summary ~ .component {
        overflow: hidden;
        > .component-content {
            transform: translateY(-100%);
            display: block;
        }
    }
    @include animationToggle.toggle-keyframes;
}