/* *****************************************************************************
*
*  Card
*
* ***************************************************************************** */

.bf-card {
    position: relative;
    width: 100%;
    max-width: 30rem;
    height: 100%;
    border: 1px solid var(--bf-color-stroke-primary);
    background-color: var(--bf-color-bg-ground);
    border-radius: var(--bf-border-radius-medium);
    overflow: hidden;

    &--has-visual .bf-card__header {
        background-color: transparent;
    }
    &--plan {
        .bf-card__content-list:last-child li:last-of-type {
            @extend .border-bottom;
            @extend .bf-border-color-secondary;
            @extend .pb-3
        }
    }
    &--phone,
    &--combo {
        .bf-card__header {
            @extend .pb-3;
        }

        .bf-card__footer {
            @extend .pt-0;
        }

        .bf-price {
            @extend .pb-3;
            @extend .border-bottom;
            @extend .bf-border-color-secondary;
        }
    }
    &--protection {
        .bf-card__header {
            @extend .pb-1;
        }
        .bf-card__footer {
            @extend .pt-0;
            .bf-card__controls {
                order: 1;
            }
        }
    }
    &[disabled] {
        cursor: default;
        // pointer-events: none;
        color: var(--bf-color-neutral-tertiary);
        border-color: var(--bf-color-stroke-secondary);
        .bf-card__visual img {
            opacity: .4;
        }
        .bf-card__details-colors {
            opacity: .4;
        }
        .bf-card__header .bf-card__badge {
            display: none;
        }
        .bf-color-neutral-secondary,
        .bf-icon {
            color: var(--bf-color-neutral-tertiary);
        }
        .bf-card__controls {
            display: none;
        }
        .bf-card__message {
            color: var(--bf-color-neutral-primary);
        }
        .bf-price .bf-display-highlight {
            color: currentColor;
            background-color: var(--bf-color-bg-action-disabled);
        }
    }
    &__visual {
        position: relative;
        min-height: 9rem;
        img {
            max-height: 18rem;
        }
        .bf-badge-icon {
            position: absolute;
            bottom: 1rem;
            right: 1rem;
            padding: .5rem;
            background-color: var(--bf-color-bg-ground);
            border-radius: 50%;
            z-index: 1;
            .bf-icon {
                width: 2rem;
                height: 2rem;
                min-width: 2rem;
            }
        }
        &--combo {
            img {
                max-width: 8rem;
                max-height: 8rem;
            }
            .bf-icon.size-large.combo {
                width: 8rem;
                height: 8rem;
                max-width: 8rem;
            }
        }
        &__label {
            max-width: 6rem;
            @extend .h4;
        }
    }
    &__header {
        @extend .bf-color-bg-underground;
        p.bf-card__description,
        .bf-card__description p {
            @extend .mb-1;
        }
    }
    &__body {
        .bf-card__content-list {
            ul > li:last-child {
                @extend .mb-0;
            }
        }
    }
    &__footer {
        display: flex;
        flex-flow: column;
        gap: 1rem;
    }
    &__controls > * {
            @extend .mb-2;
            &:last-child { @extend .mb-0 }
    }
    .bf-card__badge {
        position: absolute;
        right: 0;
        top: 0;
    }
    .bf-card__content-badge{
        width: min-content;
    }
    &__details-colors {
        display: flex;
        margin-left: 4px;
        > * {
            width: 1rem;
            height: 1rem;
            margin-left: -4px;
            border: 1px solid var(--bf-color-stroke-secondary);
            border-radius: 50%;
        }
    }
}