/*
Module Name= Accordion
Updated= 25.02.24 */

/*
=Project Description Container 
============================================= */
.proj-desc {
 position: relative;
}

/*
=Checkbox 
============================================= */
.proj-desc input {
 display: none;
}

/*
=Chevron Container
============================================= */
.chevron {
 position: absolute;
 top: 0; right: 0;
 width: 3.5rem; height: 3.5rem;
 padding: 0.5rem;
 transform: translate(.85rem, -0.7rem);
}

/*
=Label + Rotate Wrapper
============================================= */
.chevron label {
 position: absolute;
 top: 0; left: 0;
 width: 100%; height: 100%;
 opacity: 0;
 cursor: pointer;
}

.chevron .rotate-wrapper {
 height: 100%;
 display: flex;
 align-items: center;
 transition: 0.35s ease-in-out;
}

input:checked + .chevron .rotate-wrapper {
 transform: rotate(180deg);
}

/*
=Chevron Lines
============================================= */
.chevron .rotate-wrapper::before,
.chevron .rotate-wrapper::after {
 content: "";
 background-color: rgb(255 45 0);
 width: 50%; height: 0.15rem;
}

.chevron .rotate-wrapper::before {
 transform: rotate(45deg) translate(0.17rem, -0.17rem);
}

.chevron .rotate-wrapper::after {
 transform: rotate(-45deg) translate(-0.17rem, -0.17rem);
}

/*
=Accordion 
============================================= */
.accordion {  
 background: linear-gradient( rgb(242 242 242), rgb(248 248 248) );
 color: transparent;
 max-height: 0;
 overflow-y: hidden;
 padding-right: 1rem;
 transition: 0.5s ease-in-out;
}

input:checked ~ .accordion {
 color: rgb(58 65 72);
 max-height: 50rem;
}

input:checked ~ .accordion span.red {
 color: rgb(255 45 0);
}

.accordion span.red {
 transition: 0.5s ease-in-out;
}

/* ========================================== */