---
const { type, question, answer } = Astro.props;
---
<div
class={"accordion " + (type ? "mt-0!" : " show-accordion mt-10")}
data-tab={type || ""}
>
<div class="accordion-header">
<h4>{question}</h4>
<div class="accordion-icon">
<svg
width="15"
height="15"
viewBox="0 0 15 15"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
class="vertical-line"
fill-rule="evenodd"
clip-rule="evenodd"
d="M8.47821 6.52114V0H6.52169V6.52114H0V8.47766H6.52169V15H8.47821V8.47766H15V6.52114H8.47821Z"
fill="currentColor"></path>
<path
class="horizontal-line"
fill-rule="evenodd"
clip-rule="evenodd"
d="M0 6.52114V8.47766H15V6.52114H0Z"
fill="currentColor"></path>
</svg>
</div>
</div>
<div class="accordion-body">
{answer}
</div>
</div>
<style>
@layer starlight.components {
.accordion {
border: 1px solid var(--sl-color-gray-6);
padding: 1.5rem 2rem;
border-radius: 16px;
display: none;
}
.accordion.show-accordion {
display: block;
}
.accordion-header {
display: flex;
align-items: center;
justify-content: space-between;
cursor: pointer;
}
.accordion-header h4 {
font-size: 1.22rem !important;
}
.accordion-icon {
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
margin-top: 0px !important;
}
.accordion-icon svg {
position: relative;
}
.accordion-icon .vertical-line {
transition: transform 0.5s ease, opacity 0.5s ease;
transform-origin: center;
}
.accordion-icon .horizontal-line {
position: absolute;
transition: transform 0.5s ease;
transform-origin: center;
}
.accordion.active .accordion-icon .vertical-line {
transform: rotate(90deg);
opacity: 0;
}
.accordion.active .accordion-icon .horizontal-line {
transform: rotate(180deg);
}
.accordion-body {
margin-top: 0px !important;
max-height: 0px;
overflow: hidden;
transition: all 0.5s ease;
opacity: 0;
}
.accordion.active .accordion-body {
margin-top: 16px !important;
max-height: max-content;
overflow: visible;
opacity: 1;
transition: all 0.5s ease;
}
}
</style>