// =============================================================================
// COMPARE (CSS)
// =============================================================================


// Compare table layout
// -----------------------------------------------------------------------------
//
// 1. Foundation Magellan plugin.
//
// -----------------------------------------------------------------------------

.compareTable {
    border-top: container("border");
    table-layout: fixed;
    width: 100%;
}

.compareTable-row {
    vertical-align: top;

    + .compareTable-row {
        .compareTable-heading,
        .compareTable-item {
            border-top: container("border");
        }

        .compareTable-heading:empty {
            border-top: 0;
        }
    }
}


// Compare table headings
// -----------------------------------------------------------------------------

.compareTable-heading {
    font-family: fontFamily("headingSans");
    font-size: fontSize("smaller");
    font-weight: fontWeight("normal");
    padding: (spacing("base") + spacing("sixth")) spacing("base");
    position: relative;
    text-align: right;
    width: 0;

    @include breakpoint("medium") {
        width: grid-calc(3, $total-columns);
    }
}

.compareTable-headingText {
    position: absolute;
    top: spacing("base") + spacing("sixth");
    white-space: nowrap;

    @include breakpoint("medium") {
        position: inherit;
        top: inherit;
    }
}


// Compare table item
// -----------------------------------------------------------------------------

.compareTable-item {
    padding: (spacing("double") + spacing("sixth")) spacing("base") (spacing("base") + spacing("sixth"));

    @include breakpoint("medium") {
        padding-top: spacing("base") + spacing("sixth");
    }
}


// Remove product
// -----------------------------------------------------------------------------

.compareTable-removeProduct {
    background-color: container("fill", "dark");
    border-radius: 50%;
    height: spacing("single") + spacing("base");
    position: absolute;
    right: -(spacing("base"));
    top: -(spacing("base"));
    transition: background-color 0.15s ease;
    width: spacing("single") + spacing("base");

    .icon {
        fill: stencilColor("icon-color");
        height: spacing("single");
        margin-top: spacing("third");
        width: spacing("single");
    }
}


// Compare product card
// -----------------------------------------------------------------------------

.compareTable-product {
    font-weight: fontWeight("normal");
    padding: (spacing("single") + spacing("third")) spacing("base") (spacing("base") + spacing("sixth"));

    .card {
        margin-bottom: 0;
    }

    .card-body {
        min-height: spacing("single") * 4;
        padding-top: spacing("base");
    }

    .card-figure {
        overflow: visible;
    }
}


// Compare action
// -----------------------------------------------------------------------------

.compareTable-action {
    padding: 0 spacing("base") spacing("base");

    .button {
        display: block;
        padding-left: spacing("half");
        padding-right: spacing("half");
        width: 100%;
    }
}
