//== Variables
@hdeng-boxes-bg-color: @hdeng-body-bg-contrast-color;
@hdeng-boxes-font-color: @hdeng-body-font-default-color;
@hdeng-boxes-link-color: @hdeng-link-color;
@hdeng-boxes-link-color-hover: @hdeng-link-hover-color;

@hdeng-boxes-color-reduced: #8c8c8c;

@hdeng-boxes-highlight-bg-color: @hdeng-body-bg-highlight-color;
@hdeng-boxes-hightlight-font-color: @hdeng-boxes-font-color;
@hdeng-boxes-highlight-link-color: @hdeng-color-night;
@hdeng-boxes-highlight-link-hover-color: @hdeng-boxes-highlight-link-color;

//== Mixins
.hdeng-box() {
    .hdeng-clearfix();

    margin: 0 0 @hdeng-spacing;
    padding: @hdeng-content-padding;

    @media (max-width: @hdeng-breakpoint-mobile) {
        padding: @hdeng-content-padding @hdeng-content-padding-mobile;
    }

    background: @hdeng-boxes-bg-color;
    border: 0;
    border-radius: @hdeng-border-radius;

    // Typography
    color: @hdeng-boxes-font-color;

    h1, h2, h3, h4, h5, h6 {
        color: @hdeng-color-white;
    }

    a {
        color: @hdeng-boxes-link-color;

        &:hover {
            color: @hdeng-boxes-link-color-hover;
        }
    }
}

.hdeng-box-last-child() {
    *:last-child {
        margin-bottom: 0;
    }
}

.hdeng-box-highlight() {
    background: @hdeng-boxes-highlight-bg-color;

    // Typography
    color: @hdeng-boxes-hightlight-font-color;

    a {
        color: @hdeng-boxes-highlight-link-color;

        &:hover {
            color: @hdeng-boxes-highlight-link-hover-color;
        }
    }
}

.hdeng-box-shadow() {
    box-shadow: 0 0 floor(@hdeng-spacing / 4) rgba(21, 21, 21, 0.5);
}

.hdeng-box-spacer() {
    clear: both;
    height: 0;
    border: 0;
    border-bottom: 1px solid @hdeng-body-bg-default-color;
    padding: 0;
    margin: @hdeng-content-padding -@hdeng-content-padding;

    @media (max-width: @hdeng-breakpoint-mobile) {
        margin: @hdeng-content-padding -@hdeng-content-padding-mobile;
    }
}

//== Generates
.hdeng-box-critical-generate() {
    // Silence
}

.hdeng-box-generate() {
    .box {
        .hdeng-box();
        .hdeng-box-last-child();
    }

    .box--highlight {
        .hdeng-box-highlight();
        .hdeng-box-last-child();
    }

    .box--shadow {
        .hdeng-box-shadow();
    }

    .box--max {
        max-width: (@hdeng-content-width - (2 * @hdeng-content-padding));
        width: 100%;
    }

    .box__spacer {
        .hdeng-box-spacer()
    }
}
