/*
Card

Markup:
<h3>Default version</h3>
<div class="card" style="width: 33%">
    <div class="card__title">John Doe</div>
    <div class="card__text">Some card text for John Doe</div>
</div>
<h3>Cancel page version</h3>
<div class="card card--height-330 card--fancy-hover text-center" style="width: 33%">
    <div class="card__large-icon svgicon--undo"></div>
    <div class="card__title">Need a change?</div>
    <div class="card__text">Your plan should compliment your unique business. If your current plan isn't right, we may have a different one that better suits your needs.</div>
    <a class="btn btn--primary">Update your plan</a>
</div>
<h3>Card with header</h3>
<div class="card card--with-header-content" style="width: 300px;">
    <div class="card__header">
        This is a header
    </div>
    <div class="card__content">
        <div class="card__text">This is card text</div>
    </div>
</div>
<h3>Card with an arrow pointer</h3>
<div class="card card--with-arrow" style="width: 250px; height: 300px;">
    <p>This card has an arrow that points left</p>
    <p>Do you see the arrow?</p>
    <p>It's about half way down the left side</p>
    <p>You can adjust this by changing the { top: 50% } value in the :before:after part</p>
</div>
<h3>Card with a footer link</h3>
<div class="card card--with-header-content" style="width: 33%">
    <div class="card__header">Work order contacts</div>
    <div class="card__content">Some card text for John Doe</div>
    <a class="btn-link card__link-footer">View work order</a>
</div>
<div class="card card--no-shadow" style="margin-top:10px;">
    <p>This is a card with no box-shadow</p>
</div>
<div class="card card--highlight-left card--no-shadow" style="margin-top:10px;">
    <p>This is a card with the highlight positioned at the left</p>
</div>
<div class="card card--highlight-top card--highlight-grey card--no-shadow" style="margin-top:10px;">
    <p>This is a card with a grey highlight, positioned at the top</p>
</div>
<div class="card card--highlight-left card--muted card--no-shadow" style="margin-top:10px;">
    <p>This is a muted card with the highlight positioned at the left</p>
</div>
<div class="card card--with-arrow card--muted" style="margin-top:10px;">
    <p>This is a muted card with an arrow</p>
</div>
<div class="card card--condensed" style="margin-top:10px;">
    <p>This is a condensed card with less padding</p>
</div>

Name: card

Styleguide 2.22
*/
@card-border-color: @theme-grey10;
@card-border-color-fancy-hover: @theme-green1;
@card-text-color: @theme-grey9;
@card-title-color: @theme-grey7;
@card-box-shadow: 0 1px 10px 2px rgba(0, 0, 0, .05);
@card-box-shadow-darker: 0 6px 8px 0 rgba(0,0,0,0.05);
@card-box-shadow-fancy-hover: 0 1px 10px 2px rgba(0, 0, 0, .1);
@card-large-icon-size: 50px;
@card-header-color: #626265;
@card-highlight-border-width: 5px;
@card-highlight-directions: top, left, right, bottom;

.card {
    padding: 30px 25px;
    border-style: solid;
    border-width: 1px;
    border-color: @card-border-color;
    border-radius: @border-radius-default;
    background-color: #FFFFFF;
    box-shadow: @card-box-shadow;
    box-sizing: border-box;
    color: @card-text-color;
}

.card--height-330 {
    height: 330px;
}

.card--fancy-hover {
    border-width: 1px 1px 3px;
    -webkit-transition: all 200ms ease;
    transition: all 200ms ease;

    &:hover {
        border-bottom-color: @card-border-color-fancy-hover;
        box-shadow: @card-box-shadow-fancy-hover;
        -webkit-transform: translate(0px, -5px);
        -ms-transform: translate(0px, -5px);
        transform: translate(0px, -5px);
    }
}

.card--with-header-content {
    padding: 0;
    box-shadow: @card-box-shadow-darker;
}

.card--with-arrow {
    position: relative;
}

.card--with-arrow:after, .card--with-arrow:before {
    right: ~"calc(100% - 1px)";
    top: 50%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
}

.card--with-arrow:after {
    border-color: rgba(136, 183, 213, 0);
    border-right-color: #FFFFFF;
    border-width: 8px;
    margin-top: -8px;
}

.card--with-arrow:before {
    border-color: rgba(194, 225, 245, 0);
    border-right-color: @card-border-color;
    border-width: 9.5px;
    margin-top: -9.5px;
}

.card__header {
    height: 48px;
    border-radius: @border-radius-default @border-radius-default 0 0;
    border-bottom: 1px solid @theme-grey10;
    padding: 15px 20px;
    color: @card-header-color;
    font-size: @font-size--16;
    font-weight: bold;
    line-height: 20px;
    box-sizing: border-box;
    background-color: @theme-grey14;
}

.card__content {
    padding: 20px;
    box-sizing: border-box;
}

.card__content--no-padding {
    padding: 0;
}

.card__large-icon {
    display: block;
    height: @card-large-icon-size;
    width: @card-large-icon-size;
    background-size: @card-large-icon-size;
    margin: 5px auto 25px auto;
    padding: 0;
}

.card__title {
    margin-bottom: 5px;
    .text-semibold;
    font-size: @font-size--22;
    color: @card-title-color;
}

.card__text {
    min-height: 80px;
    margin-bottom: 25px;
    line-height: 20px;
}

.card__text {
    min-height: 80px;
    margin-bottom: 25px;
    line-height: 20px;
}

.card__link-footer {
    display: block;
    width: 100%;
    text-align: center;
    text-transform: uppercase;
    border-top: 1px solid @theme-grey10;
    font-size: @font-size--12;

    &:hover,
    &:active,
    &:focus {
        border-top: 1px solid @theme-grey10;
    }
}

.card--no-shadow {
    box-shadow: none;
}

.card-highlight(@directions; @i: 1) when (@i =< length(@directions)){
    @direction: extract(@directions, @i);
    .card--highlight-@{direction} {
        border-@{direction}: @card-highlight-border-width solid @theme-green1;
        &.card--highlight-grey,
        &.card--muted {
            border-@{direction}-color: @theme-grey4;
        }
    }
    .card-highlight(@directions, @i + 1);
}

.card--muted {
    background-color: @theme-grey14;

    &.card--with-arrow:after {
        border-right-color: @theme-grey14;
    }
}

.card-highlight(@card-highlight-directions);

.card--condensed {
    padding: 20px;
}