/**
 * Fichier  : /features/prices/assets/css/item.css
 * Fonction : style du des grille tarifaire
 */


/* ==================================================
   ITEM
================================================== */

.prices section .item {
    overflow: hidden;
}

.prices section .item {
    display: grid;
    grid-template-rows: auto 1fr;
}


/* ==================================================
   TITLE
================================================== */

.prices section .item .title {
    margin-bottom: 2em;
}

.prices section .item .title {
    display: flex;
    flex-direction: column;
    align-items: normal;
    gap: 10px;
}

.prices section .item .title {
    grid-row: 1;
}

.prices section .item .title h3 {
    font-family: 'bold-font';
    font-size: 1.6em;
    letter-spacing: -1px;
    color: var(--color__3);
}

.prices section .item .title h3 span {
    font-family: 'aesthetic-font';
    letter-spacing: 1px;
    color: var(--color__2);
}

.prices section .item .title p {
    font-family: 'content-font';
    font-size: .8em;
    color: var(--color__3);
}

.prices section .item .title p {
    display: none;
}

.prices section .item .title p.active {
    display: block;
}

.prices section .item .title hr {
    background-color: var(--color__2);
    border: none;
}

.prices section .item .title hr {
    width: 1.5em;
    height: .1em;
}


/* ==================================================
   DATA
================================================== */

.prices section .item .data {
    display: flex;
    flex-direction: column;
    gap: 1em;
}

.prices section .item .data {
    grid-row: 2;
    grid-column: 1;
}

.prices section .item .data div {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.prices section .item .data div p {
    font-family: 'content-font';
    font-size: .8em;
    color: var(--color__3);
}

.prices section .item .data div h5 {
    font-family: 'bold-font';
    font-size: .9em;
    color: var(--color__2);
}

.prices section .item .data div hr {
    border: none;
    border-top: 2px dotted #eee !important;
}


/* ==================================================
   TRANSITIONS
================================================== */

.prices section .item .data {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateX(0);
}

.prices section .item .data.active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.prices section .item .data.exit-to-right {
    animation: priceExitToRight .35s ease forwards;
}

.prices section .item .data.enter-from-left {
    animation: priceEnterFromLeft .45s cubic-bezier(.22, 1, .36, 1) forwards;
}

.prices section .item .data.exit-to-left {
    animation: priceExitToLeft .35s ease forwards;
}

.prices section .item .data.enter-from-right {
    animation: priceEnterFromRight .45s cubic-bezier(.22, 1, .36, 1) forwards;
}


/* ==================================================
   KEYFRAMES
================================================== */

@keyframes priceExitToRight {

    from {
        opacity: 1;
        transform: translateX(0);
    }

    to {
        opacity: 0;
        transform: translateX(45px);
    }

}

@keyframes priceEnterFromLeft {

    from {
        opacity: 0;
        transform: translateX(-45px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }

}

@keyframes priceExitToLeft {

    from {
        opacity: 1;
        transform: translateX(0);
    }

    to {
        opacity: 0;
        transform: translateX(-45px);
    }

}

@keyframes priceEnterFromRight {

    from {
        opacity: 0;
        transform: translateX(45px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }

}