// BOX
.box{
    position: relative;
    display: block;
    margin-top: 1.5rem;
    padding: 1.5rem 3rem 3rem 3rem;
    background: $grey--light;

    @include desktop{
        @include transition(background);

        // border
        &:before{
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            border: 1px solid $grey--light;
        }

        // hover
        &:hover{
            background: white;
        }
        &:hover .box__title{
            color: $grey--medium;
        }
        &:hover .box__number{
            background: $grey--medium;

            span{
                opacity: 0;
                transform: translate3d(0, -0.75rem, 0);
            }
            svg{
                opacity: 1;
                transform: translate3d(0, 0, 0);
            }
        }
    }
}
.box__category{
    display: block;
    line-height: $font-leading;
    font-size: 0.875rem;
    font-weight: 700;
    color: $grey--medium;
}
.box__title{
    margin-top: 0;
    color: $grey--dark;

    @include desktop{
        @include transition(color);
    }
}
.box__description{
    color: $grey--dark;
    padding-right: 4.5rem;
}
.box__number{
    position: absolute;
    bottom: 0;
    right: 0;
    display: block;
    height: 4.5rem;
    width: 4.5rem;
    background: darken($grey--light, 10%);;

    span{
        display: block;
        line-height: 4.5rem;
        text-align: center;
        font-weight: 700;
        font-size: 0.875rem;
        color: $grey--dark;
    }

    @include mobile{

        svg{
            display: none;
        }
    }

    @include desktop{
        @include transition(background);

        span{
            transition-duration: 0.3s;
            transition-timing-function: $easing;
            transition-property: opacity, transform;
        }
        svg{
            position: absolute;
            top: 1.5rem;
            left: 1.5rem;
            display: block;
            width: 1.5rem;
            height: 1.5rem;
            fill: white;
            // hide
            opacity: 0;
            transform: translate3d(0, 0.75rem, 0);
            transition-duration: 0.3s;
            transition-timing-function: $easing;
            transition-property: opacity, transform;
        }
    }
}

// colors
.box--main{

    .box__category{
        color: $main;
    }

    @include desktop{

        &:hover .box__title{
            color: $main;
        }
        &:hover .box__number{
            background: $main;
        }
    }
}
.box--secondary{

    .box__category{
        color: $secondary;
    }

    @include desktop{

        &:hover .box__title{
            color: $secondary;
        }
        &:hover .box__number{
            background: $secondary;
        }
    }
}