@import '../mixins';

@hdeng-archive-date-box-bg: @hdeng-key-color;
@hdeng-archive-title-color: @hdeng-color-white;

.hdeng-archive-critical-generate() {
    // Silence
}

.hdeng-archive-generate() {
    .archive__item {
        position: relative;
        padding-top: @hdeng-spacing;
        margin-bottom: @hdeng-spacing;
        border-top: 1px solid @hdeng-header-bg-contrast-color;
    }

    .archive__item--grid {
        .gee-grid();

        .archive__grid-image {
            .gee-unit(12, 12);
            margin-bottom: (@hdeng-spacing / 2);

            img {
                .hdeng-img-responsive();
                margin: auto;
            }

            @media (min-width: (@hdeng-breakpoint-default + 1px)) {
                .gee-unit-width(3, 12);
                margin: 0;
            }
        }

        .archive__grid-content {
            .gee-unit(12, 12);

            @media (min-width: (@hdeng-breakpoint-default + 1px)) {
                padding-left: @hdeng-gutter;
                .gee-unit-width(9, 12);
            }
        }
    }

    .archive__title {
        .hdeng-h2();
        color: @hdeng-archive-title-color;
        margin-bottom: (@hdeng-spacing / 2);
        padding-right: ((@hdeng-spacing * 2) + @hdeng-spacing); // For date badge

        a {
            color: @hdeng-archive-title-color;
            text-decoration: none;
        }
    }

    .archive__meta {
        padding: 0;
        margin: -(@hdeng-spacing / 2) 0 (@hdeng-spacing / 2) 0;
        font-size: @hdeng-base-font-size-medium;
        color: darken(@hdeng-boxes-color-reduced, 15%);
        list-style: none;

        a {
            color: darken(@hdeng-boxes-color-reduced, 15%);
        }
    }

    .archive__meta-item {
        display: inline-block;
        margin-right: floor(@hdeng-spacing / 4);

        &:after {
            content: '•';
            margin-left: floor(@hdeng-spacing / 4);
        }

        &:last-child {
            border: none;

            &:after {
                display: none;
            }
        }
    }

    .archive__date-badge {
        .gee-unit-base(@gee-unit-font-family);
        width: (@hdeng-spacing * 2);
        position: absolute;
        top: 0;
        right: (@hdeng-spacing / 2);
    }

    .archive__date-month,
    .archive__date-day {
        display: block;
        text-align: center;
    }

    .archive__date-month {
        line-height: @hdeng-spacing;
        font-size: @hdeng-base-font-size-medium;
        background-color: @hdeng-archive-date-box-bg;
        color: #fff;
    }

    .archive__date-day {
        line-height: (@hdeng-spacing * 1.5);
        font-size: (@hdeng-base-font-size-medium * 2);
        background-color: #fff;
        color: #222;
    }
}
