<script lang="ts">
    import Icon from "../utils/Icon.svelte";

    export let open: boolean = false;
    let hovered = false;

    function onMouseEnter() {
        hovered = true;
    }

    function onMouseLeave() {
        hovered = false;
    }
</script>

<style lang="scss">
    @import "../../scss/helpers";

	ul {
		display: flex;
        flex-direction: column;
        gap: 8px;
		margin: 0;
        padding: 0;
		list-style: none;
	}

    @include large-ge() {
		ul:not(.open) {
            display: none;
        }

		ul {
            position: absolute;
            top: calc(100% - 3px);
            right: 0;
            z-index: 1;

            @include surface(3);
            padding: 16px;
            border-top: 3px solid #ffffff1c;
            border-radius: 0 0 3px 3px;
		}
    }

    .icon-container {
		position: absolute;
        z-index: 2;
        left: 50%;
        top: calc(100% - 8px);

        transition: transform 50ms linear;
        transform: translateX(-50%);

        &.open {
            transform: translateX(-50%) translateY(8px) rotateX(180deg);
        }
    }

    @include medium-le {
        .icon-container {
            display: none;
        }
    }
</style>

<div class="icon-container" class:open={open || hovered}>
    <Icon name="chevron-down"/>
</div>
<ul class:open={open || hovered} on:mouseenter={onMouseEnter} on:mouseleave={onMouseLeave}>
    <slot/>
</ul>
