@import '../styles/variables';

$card-width: 250px;
$card-height: 366px;
$middle-card-width: 270px;
$middle-card-height: 390px;
$card-padding: 15px;

.main {
    position: relative;
    width: $card-width;
    height: $card-height;
    margin: $card-padding 0;
    padding: $card-padding;
    box-sizing: border-box;
    border: solid 1px #d8dae5;
    box-shadow: 0 1px 2px 0 rgba(71, 64, 64, 0.18);
    transition: ease 0.3s box-shadow, ease 0.3s transform;
    &.active {
        width: $middle-card-width;
        height: $middle-card-height;
        margin-block-start: 0;
        margin-inline-end: 0;
        margin-block-end: 0;
        margin-inline-start: 0;
        box-shadow: 0 14px 27px 0 rgba(0, 0, 0, 0.1);
        &:last-of-type {
            border-width: 1px;
        }
        &:hover {
            box-shadow: 0px $card-padding 27px 8px rgba(0, 0, 0, 0.1);
        }
    }
    &:first-of-type {
        border-width: 1px 0 1px 1px;
        &:hover {
            box-shadow: -8px 0 27px 0 rgba(0, 0, 0, 0.19);
        }
    }
    &:last-of-type {
        border-width: 1px 1px 1px 0;
        &:hover {
            box-shadow: 8px 0 27px 0 rgba(0, 0, 0, 0.19);
        }
    }
}

.title {
    flex-grow: 0;
    font-family: $duda-title-font;
}

.sub-title {
    flex-grow: 0;
    padding-block-end: 10px;
    color: $font-light-gray;
}

.price {
    .discount {
        text-align: center;
        background-color: transparent;
        color: $dark-gray;
        font-weight: bold;
    }
}

.featuresWrapper {
    width: 100%;
    display: flex;
    flex-grow: 1;
    align-self: flex-start;
    height: 150px;
    .feature {
        font-size: 15px;
        padding-block-start: 6px;
        padding-inline-end: 0;
        padding-block-end: 6px;
        padding-inline-start: 10px;
        color: $clickable-item;
        align-self: flex-start;
    }
    .checkFeature {
        color: $duda-green;
        margin-inline-start: 6px;
    }
}

.button {
    min-width: 80px;
    height: 30px;
    margin-block-start: 10px;
    padding-block-start: 0;
    padding-inline-end: 15px;
    padding-block-end: 0;
    padding-inline-start: 15px;
}
.scrollbar-placeholder {
    width: 20px;
}

.featureLockPopup {
    position: absolute;
    bottom: -10px;
}