/* Block */

.block-wrap {

    --block-padding: 30px;
    --block-border-radius: 9px;
    --block-gradient-color: var(--theme-primary-darker, transparent);
    --block-padding-extra: 175px;


    position: relative;

    &:not(.no-padding):not(.minimal) {
        padding: var(--block-padding);
    }


    &, & > .block-image {
        border-radius: var(--block-border-radius);
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
    }


    & > .block-image {
        position: relative;
        z-index: 2;

        &:not(.relative) {
            position: absolute;
            overflow: hidden;
            inset: 0;
        }

        &::before,
        &::after {
            content: ' ';
            position: absolute;
            inset: 0;
            z-index: 2;
        }

        &::before {
            background-color: rgba( 0, 0, 0, 0.2 );
        }

        &::after {
            background: linear-gradient( 0deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 20%, var(--block-gradient-color) 100%);
            opacity: 0.8;
        }

    }


    &.full-height,
    &.full-height > .block-content {
        height: 100%;
    }


    & > .block-content {
        display: flex;
        flex-direction: column;
        position: relative;
        z-index: 10;
    }


    &.no-image:not(.minimal) {
        background-color: var(--theme-lighter);
    }


    &.has-image > .block-content:not(.default) {
        color: var(--theme-white);
    }


    .block-header {
        margin-bottom: 1rem;
    }

    .block-icon {
        margin-bottom: 1rem;

        i.icon.default.flag {
            border-radius: 3px;
            overflow: hidden;
        }

    }

    .block-title {
        margin-bottom: 1rem;
    }

    .block-actions {
        margin-top: 1.5rem;
    }

    .block-footer {
        margin-top: 1rem;
    }


}




/* Block Product */

.block-wrap.product-block {

    & > .block-content {
        justify-content: space-between;
    }

    .block-actions {
        text-align: right;
        margin-top: 4rem;
    }

}






/* Block Article */

.block-wrap.article-block {

    &:not(.flex-start) > .block-content {
        justify-content: end;
    }

    & > .block-image {

        &::before {
            background: linear-gradient( 180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 100%);
        }

        &::after {
            background: linear-gradient( 180deg, rgba(0, 0, 0, 0) 0%, var(--block-gradient-color) 100%);
        }

    }


    .block-footer {

        &.pull-image {
            margin-top: var(--block-padding);
            margin-left: calc(-1 * var(--block-padding));
            overflow: hidden;

            & > img {
                max-width: 75%;
                margin-left: -30px;
            }
        }

    }


    &.has-top .block-content {
        padding-top: var(--block-padding-extra);
    }



}





/* Block Card */

.block-wrap.card-block {
    --block-padding: 0px;

    display: flex;
    flex-direction: column;
    border-radius: var(--block-border-radius);
    padding: 0;


    &:not(.minimal),
    &.no-image:not(.minimal) {
        background-color: var(--theme-white);
    }


    &:not(.no-shadow) {
        box-shadow: 0 6px 20px rgba(0, 0, 0, .06);
    }


    & > .block-content {
        justify-content: end;
    }


    &.has-image > .block-content {
        justify-content: space-between;
    }


    &:not(.no-padding) > .block-content {
        --block-padding: 20px;
        padding: var(--block-padding);
    }


    &.full-height:not(.no-image) > .block-content {
        height: auto;
    }


    .block-icon {
        margin-bottom: 0;
    }


    & > .block-image {
        flex: 1 1;
        min-height: 150px;
        overflow: hidden;
        border-radius: var(--block-border-radius) var(--block-border-radius) 0 0;
    }






}