/*
 * Data card.
 */

@use "sass:math";

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

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

        .theme-icon,
        .theme-icon * {
            max-width: floor(math.div($icon-size, 2));
            max-height: floor(math.div($icon-size, 2));
        }
    }

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

@mixin data-card-vertical-variant() {
    flex-direction: column;

    .data-card-header {
        border-bottom: $data-card-border-width solid $data-card-border-color;

        @include border-radius($data-card-inner-border-radius $data-card-inner-border-radius 0 0);
    }

    &.data-card-poster {
        .data-card-toolbar .data-card-toolbar-btn {
            @include text-movie-subtitles();
        }
    }

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

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

    .data-card-header {
        min-width: 40%;
        border-right: $data-card-border-width solid $data-card-border-color;

        @include border-radius($data-card-inner-border-radius 0 0 $data-card-inner-border-radius);
    }

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

.data-card {
    display: flex;
    position: relative; // constrain actions toolbar

    color: $data-card-color;
    background: $data-card-bg;
    font-size: $data-card-font;

    @include border($data-card-border-width solid $data-card-border-color);
    @include border-radius($data-card-border-radius);
    @include box-shadow($data-card-box-shadow);
}

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

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

// clickable variant
.data-card-clickable {
    transition-property: box-shadow, transform;
    transition-duration: .3s;
    box-shadow: $box-shadow-sm;

    &:hover {
        z-index: 2;
        transform: translateY(-2px);
        box-shadow: 0 18px 35px rgba(50,50,93,.1),0 8px 15px rgba(0,0,0,.07);
    }
}

// TODO : create a mixin to generate card styles variants
.data-card-muted {
    //border-color: $data-card-muted-border;
    //box-shadow: none;
    /*color: $data-card-muted-color;
    background-color: $data-card-muted-bg;
    @include 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-grid-item-container:hover {
    .data-grid-item-select {
        z-index: 3;
        transform: translateY(-2px);
    }
}

.data-tree-item:hover {
    .data-tree-item-select {
        z-index: 3;
        transform: translateY(-2px);
    }
}

.data-card-selected {
    color: $data-card-active-color;
    background-color: $data-card-active-bg;
    //border-color: $data-card-active-border-color;

    //@include box-shadow(0 0 2px rgba($brand-info, .35));

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

    .data-card-icon {
        color: $data-card-active-icon-color;
        background-color: $data-card-active-bg;
    }

    /*&:hover {
        background-color: #bfe3f4;

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

// with poster image variant
.data-card-poster {
    .data-card-flag {
        @include 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;
}

.data-card-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: $data-card-bg;
    border-radius: 50%;
    line-height: 0;

    // for FA icons
    color: $data-card-icon-color;

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

    .theme-icon {
        flex: 1;
    }

    img, svg {
        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: $font-weight-bolder;
    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-x: hidden;
}

.data-card-description {
    margin-bottom: $data-card-padding;
    margin-left: $data-card-padding;
    margin-right: $data-card-padding;
    font-size: $data-card-content-font;
    line-height: $line-height-base;
    text-align: justify;
    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;
}

// to remove. use bootstrap margin utilities
.data-card-row + .data-card-row {
    margin-top: 5px;
}

.data-cards-stacked {
    .data-card {
        box-shadow: none;
        margin: 0;

        + .data-card {
            border-top: none;
        }

        &:not(:first-child) {
            @include border-top-radius(0);

            .data-card-header {
                @include border-top-radius(0);
            }
        }

        &:not(:last-child) {
            @include border-bottom-radius(0);

            .data-card-header {
                @include border-bottom-radius(0);
            }
        }
    }
}

.data-cards-stacked-flush {
    .data-card {
        border-radius: 0;
        border: none;

        .data-card-header {
            border-radius: 0;
        }

        + .data-card {
            border-top: $data-card-border-width solid $data-card-border-color;
        }
    }
}

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

.data-card-xs {
    @include 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 {
        margin: 0 10px;
    }

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

.data-card-sm {
    @include data-card-size-variant($data-card-icon-sm-size, $data-card-title-sm-font, $data-card-padding);

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

    .data-card-flag {
        font-size: 75%;
    }
}
.data-card-lg {
    @include 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%;
    }
}


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

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

// XS screens :
@media (max-width: map-get($grid-breakpoints, 'sm')) {
    .data-card-row {
        &.data-card-xs,
        &.data-card-sm {
            @include data-card-horizontal-variant();
        }

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

// SM / MD / LG screens :
@media (min-width: map-get($grid-breakpoints, 'sm')) {
    .data-card-row {
        @include data-card-horizontal-variant();
    }
}
