/*
 * Data card.
 */

// todo : create mixin for color variants

.data-card {
    display: flex;
    position: relative; // constrain actions toolbar
    border: 1px solid @data-card-border;
    color: @data-card-color;
    background: @data-card-bg;
    font-size: @data-card-font;

    .border-radius(@data-card-border-radius);
    .box-shadow(@data-card-box-shadow);
}

.data-card-toolbar {
    position: absolute;
    top: -1px; // absorb btn border
    right: -1px; // absorb btn border

    .btn {
        padding: @data-grid-gutter;
    }

    .dropdown.open {
        .btn {
            position: relative;
            background: @gray-lighter;
            border-color: @dropdown-border;
            border-bottom-color: @dropdown-bg;
            box-shadow: @dropdown-menu-box-shadow;
            background-clip: padding-box;
        }
    }

    .dropdown-menu {
        margin-top: -1px;
    }
}

// clickable variant
.data-card-clickable {
    &:hover {
        //z-index: 2;
        border-color: @data-card-active-border;
        color: @data-card-active-color;
        background-color: @data-card-active-bg;
        .box-shadow(@data-card-active-box-shadow);

        .data-card-header {
            background: @data-card-active-header-bg;
            border-color: @data-card-active-inner-border;
        }

        .data-card-content {
            color: @data-card-active-color;
        }
    }
}

// TODO : create a mixin to generate card styles variants
.data-card-muted {
    border-color: @data-card-muted-border;
    color: @data-card-muted-color;
    background-color: @data-card-muted-bg;
    .box-shadow(@data-card-muted-box-shadow);

    .data-card-header {
        background: @data-card-muted-header-bg;
        border-color: @data-card-muted-inner-border;
    }

    .data-card-content {
        color: @data-card-muted-color;
    }
}

.data-card-selected {
    background-color: @state-info-bg;
    border-color: #abcfe0; // todo : use a var same as .table

    .box-shadow(0 0 2px fadeOut(@brand-info, 65%));

    .data-card-header {
        background: #bfe3f4;
        border-color: #abcfe0 !important;
    }

    &:hover {
        background-color: #bfe3f4;

        .data-card-header {
            background: #b5d9ea;
        }
    }
}

// with poster image variant
.data-card-poster {
    .data-card-flag {
        .text-movie-subtitles();
    }
}

.data-card-header {
    position: relative; // constrain flags
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: @data-card-header-bg;
    border-color: @data-card-inner-border;
}

.data-card-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, .6);
    border-radius: 50%;
    line-height: 0;

    // for FA icons
    color: rgba(0, 0, 0, 0.5) !important;

    // for SVG icons
    //fill: rgba(0, 0, 0, 0.5) !important;
    //stroke: rgba(0, 0, 0, 0.5) !important;

    img {
        max-width: 100%;
        max-height: 100%;
    }
}

.data-card-flags {
    position: absolute;
    line-height: 1;
    bottom: @data-grid-gutter;
    right: @data-grid-gutter;
}

.data-card-flag {
    cursor: help;
    font-weight: bold;

    + .data-card-flag {
        margin-left: 5px;
    }
}

.data-card-title {
    margin: @data-card-padding;
    padding: 0;
    font-size: @data-card-font;
    font-weight: bold;
    overflow: hidden;
    text-overflow: ellipsis;

    > small {
        margin-top: 5px;
        display: block;
    }
}

.data-card-content {
    color: @data-card-color; // reset color when card is clickable (uses a <a> tag)
    display: flex;
    flex-direction: column;
    align-items: stretch;
    text-align: left;
    overflow: hidden;
}

.data-card-description {
    margin-bottom: @data-card-padding;
    font-size: @data-card-content-font;
    line-height: @line-height-base;
    text-align: justify;
    padding: 0 @data-card-padding;
    max-height: @line-height-base * 5em;
    overflow: hidden;
}

.data-card-footer {
    margin-top: auto; // ensure footer is always at the bottom
    font-size: @data-card-content-font;
    text-align: right;
    padding: 0 @data-card-padding @data-card-padding;
    color: @data-card-color-muted;
    font-style: italic;
}


// -
// Sizing variants
// ---

.data-card-xs {
    .data-card-size-variant(30px, @data-card-title-sm-font, 10px);

    .data-card-flag {
        font-size: 10px;
    }

    .data-card-title {
        margin: 10px;
        white-space: nowrap;
    }

    .data-card-description {
        padding: 0 10px;
    }

    .data-card-footer {
        padding: 0 10px 10px;
    }
}

.data-card-sm {
    .data-card-size-variant(@data-card-icon-sm-size, @data-card-title-sm-font, 10px);

    .data-card-flags {
        bottom: 10px;
        right: 10px;
    }

    .data-card-flag {
        font-size: 75%;
    }
}
.data-card-lg {
    .data-card-size-variant(@data-card-icon-lg-size, @data-card-title-lg-font, 30px);

    .data-card-flags {
        bottom: @data-card-padding;
        right: @data-card-padding;
    }

    .data-card-flag {
        font-size: 100%;
    }
}

// mixins
.data-card-size-variant(@icon-size, @title-size, @icon-spacer) {
    .data-card-header {
        min-height: @icon-size + @icon-spacer*2; // icon margin + height
    }

    .data-card-icon {
        font-size: floor(@icon-size / 2); // for FA icons
        width: @icon-size;
        height: @icon-size;
        margin: @icon-spacer;

        img.icon {
            max-width: floor(@icon-size / 2);
            max-height: floor(@icon-size / 2);
        }
    }

    .data-card-title {
        font-size: @title-size;
    }
}


// -
// Orientation variants
// ---

.data-card-col {
    .data-card-vertical-variant();
}

// XS screens :
@media (max-width: @screen-xs-max) {
    .data-card-row {
        &.data-card-xs,
        &.data-card-sm {
            .data-card-horizontal-variant();
        }

        // even for row card, we switch on vertical display for better rendering
        &.data-card-lg {
            .data-card-vertical-variant();
        }
    }
}

// SM / MD / LG screens :
@media (min-width: @screen-sm-min) {
    .data-card-row {
        .data-card-horizontal-variant();
    }
}

// mixins
.data-card-vertical-variant() {
    flex-direction: column;

    .data-card-header {
        border-bottom-width: 1px;
        border-bottom-style: solid;

        .border-radius(@data-card-border-radius @data-card-border-radius 0 0);
    }

    &.data-card-poster {
        .data-card-toolbar {
            > .data-card-toolbar-btn,
            .dropdown:not(.open) .dropdown-toggle {
                .text-movie-subtitles();
            }
        }
    }

    .data-card-content {
        flex: 1 0 auto;

        .border-radius(0 0 @data-card-border-radius @data-card-border-radius);
    }

    .data-card-description {
        margin-left: @data-card-padding;
        margin-right: @data-card-padding;
    }
}

.data-card-horizontal-variant() {
    width: 100%; // fill container
    flex-direction: row;

    .data-card-header {
        min-width: 40%;
        border-right-width: 1px;
        border-right-style: solid;

        .border-radius(@data-card-border-radius 0 0 @data-card-border-radius);
    }

    .data-card-content {
        flex: 1 0 0;
        max-width: 60%;

        .border-radius(0 @data-card-border-radius @data-card-border-radius 0);
    }
}
