@import '../libs/variables';

.color_green{
    background: $color_green;
}

.color_green_img{
    background: url('/assets/img/01.png') 100% 100% no-repeat;
    height: 100px;
    width: 120px;
}

.color_pink_img{
    background: url('/assets/img/02.png') 100% 100% no-repeat;
    height: 160px;
    width: 120px;
}

.color_red_img{
    background: url('/assets/img/03.png') 100% 100% no-repeat;
    height: 140px;
    width: 120px;
}

.color_blue_img{
    background: url('/assets/img/04.png') 100% 100% no-repeat;
    height: 140px;
    width: 120px;
}

.color_pink{
    background: $color_pink;
}

.color_red{
    background: $color_red;
}

.color_blue{
    background: $color_blue;
}

.card_stoke_skeleton{
    width: 245px;
    height: 160px;
    background: $color_blue;
}

.card_stock{
    width: 245px;
    min-width: 245px;
    height: 160px;
    border-radius: 14px;
    margin: 10px 10px 10px 0;
    position: relative;
    display:inline-block;

    .title{
        font-style: normal;
        font-weight: 500;
        font-size: 20px;
        line-height: 24px;
        letter-spacing: 0.02em;
        color: #FFFFFF;
    }

    .title_box{
        display: inline-table;
        position: absolute;
        width: 200px;
        padding-top: 20px;
        padding-left: 20px;
    }

    .sale_box{
        /* Auto layout */
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        padding: 5px;
        margin: 20px;
        position: absolute;
        bottom: 0px;
        width: 74px;
        height: 26px;
        background: #FFFFFF;
        border-radius: 2px;
        color: #4B90EB;
    }

    .img{
        position: absolute;
        right: 0px;
        bottom: 0px;
        border-radius: 14px;
    }
}