/* card common style */

.card {
    height: fit-content;
    border-radius: var(--radius-xLarge);
    background-color: var(--color-background-0);
    box-shadow: var(--shadow-Small);

    display: flex;
    flex-direction: column;
    align-items: stretch;

}

.card > .header {
    /* width: 100%; */
    height: fit-content;
    padding-top: var(--spacing-Medium);
    padding-bottom: var(--spacing-xSmall);
    padding-left: var(--spacing-Medium);
    padding-right: var(--spacing-Medium);
}

.card > .body {
    /* width: 100%; */
    height: fit-content;
    padding-bottom: var(--spacing-xSmall);

    display: flex;
    flex-direction: column;
}

.card > .body > .list-item {
    /* width: 100%; */
    height: fit-content;
    padding-top: var(--spacing-xxSmall);
    padding-bottom: var(--spacing-xxSmall);
    padding-left: var(--spacing-Medium);
    padding-right: var(--spacing-Medium);

    display: flex;
    gap: var(--spacing-xSmall);
    align-items: center;
}

.card .list-item:hover {
    background-color: var(--color-state-pressed);
}

.card .list-item span {
    word-break: keep-all;
}

.card .icon.small {
    width: 56px;
    height: 56px;
}
.card .icon.large {
    width: 64px;
    height: 64px;
}

.card .text {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xxxSmall);
    align-items: flex-start;
    flex: 1;
}

.card .trailing-arrow {
    width: 40px;
    height: 40px;
}



/* type1 style */

.card.type1 .list-item > .icon-box {
    width: 88px;
    height: 88px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: var(--color-surface-neutral-1);
    border-radius: var(--radius-xLarge);
}


/* type2 style */



/* type3 style */

.card > .body > .horizontal-list {
    /* width: 100%; */
    height: fit-content;

    display: flex;
    flex-wrap: wrap;

    padding-bottom: var(--spacing-xSmall);
    padding-left: var(--spacing-Medium);
    padding-right: var(--spacing-Medium);
    gap: var(--spacing-xSmall);
}
.card > .body > .horizontal-list > .list-item {
    width: 268px;
    height: fit-content;
    border-radius: var(--radius-Large);

    padding: var(--spacing-Small);
    gap: var(--spacing-xxSmall);

    display: flex;
    flex-direction: column;
    align-items: flex-start;
    flex: 1;

    background-color: var(--color-surface-neutral-1);
}


/* type4, type5 style */

.card.type4, .card.type5 {
    padding-top: var(--spacing-Small);
    padding-bottom: var(--spacing-Small);
    padding-left: var(--spacing-Medium);
    padding-right: var(--spacing-Medium);

    flex-direction: row;
    align-items: center;
    gap: var(--spacing-xSmall);
}

.card.type5 #lottie-icon {
    width: 72px;
    height: 72px;
}