@import "@Themes/constants.scss";

@keyframes smooth-appear {
	from {
		opacity: 0;
	}

	to {
		opacity: 1;
	}
}

@keyframes smooth-disappear {
	from {
		opacity: 1;
	}

	to {
		opacity: 0;
	}
}

.root {
    border: 1px solid $grey;
    padding: 16px;
    transition: all 350ms $custom-easing;

    .header {
        display: flex;
        align-items: center;
        justify-content: space-between;

        .chevron-icon {
            margin-left: 16px;
            transform: rotate(90deg);
            transition: all 350ms $custom-easing;
            cursor: pointer;
            &.open {
                transform: rotate(-90deg);
            }
        }
    }

    .container {
        margin-top: 32px;
        --animation-delay: 1ms;
        animation: smooth-appear var(--animation-delay) $custom-easing;
    
        &[data-will-close="true"] {
            animation: smooth-disappear var(--animation-delay) $custom-easing;
        }
        
        .content {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 64px;
            margin-top: 32px;
        }

        .button-container {
            display: inline-grid;
            justify-items: start;
            gap: 32px;
        }
    }
}