@use "../../core";
@use "../../core/config-variables";
@use "../../core/size";
@use "../../core/mixins/circle" as *;
@use "variables" as *;

$ICON_WIDTH: var(--f-icon-size-small);
$ICON_MARGIN: 0.5rem;
$CONTENT_MARGIN: calc(#{$ICON_WIDTH} + #{$ICON_MARGIN});
$EXPANDABLE_PARAGRAPH_LINE_HEIGHT: var(--f-line-height-medium);

.expandable-paragraph {
    color: $expandable-paragraph-color-text-default;
    margin: 0 0 core.densify(var(--f-margin-component-bottom));
    &__heading {
        line-height: $EXPANDABLE_PARAGRAPH_LINE_HEIGHT;
        margin: 0;

        button {
            border: none;
            background-color: $expandable-paragraph-color-background;
            cursor: pointer;
            margin: 0;
            display: flex;
            text-align: left;
            padding: 0;
            flex-shrink: 0;
        }
    }

    &__icon {
        @include circle($background: $expandable-paragraph-icon-color-background, $size: $ICON_WIDTH);

        margin-top: calc((#{$EXPANDABLE_PARAGRAPH_LINE_HEIGHT} * 1em - #{$ICON_WIDTH}) / 2); // Unit "em" intended here, align icon to header
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
        outline: 2px solid transparent;
        display: flex;
        color: $expandable-paragraph-icon-color-content;
        padding: 3px; // cross icon size
        flex-shrink: 0; // needed for IE11
        margin-right: $ICON_MARGIN;

        .icon {
            transition: transform var(--f-animation-duration-long) ease;
        }
    }

    &.expandable-paragraph--open {
        .expandable-paragraph__icon {
            svg:nth-child(2) {
                transform: rotate(0);
            }
        }

        .expandable-paragraph__container {
            height: auto;
        }
    }

    &.expandable-paragraph--closed {
        .expandable-paragraph__icon {
            svg:nth-child(2) {
                transform: rotate(-90deg);
            }
        }
    }

    &__container {
        height: 0;
        overflow: hidden;
        transition: height var(--f-animation-duration-medium) cubic-bezier(0.46, 0.03, 0.52, 0.96);
    }

    &__content,
    &__related-information {
        margin-left: $CONTENT_MARGIN;
    }

    &__related-information {
        color: $expandable-paragraph-color-text-discrete;
        font-size: 0.875rem;
    }

    &__content {
        margin-top: core.densify(size.$margin-075);
        margin-bottom: core.densify(size.$margin-100);
        overflow: hidden;
        transition: height 400ms cubic-bezier(0.46, 0.03, 0.52, 0.96);
    }

    &__separator {
        border-bottom: var(--f-border-width-medium) solid $expandable-paragraph-color-border;
        margin: 0 $ICON_MARGIN core.densify(size.$margin-050) $ICON_MARGIN;
    }

    &--list {
        margin-bottom: core.densify(size.$margin-050);
        padding-bottom: core.densify(size.$padding-050);
        border-bottom: var(--f-border-width-small) solid $expandable-paragraph-color-border;
    }
}