// Copyright (c) 2016-2018 VMware, Inc. All Rights Reserved.
// This software is released under MIT license.
// The full license information can be found in LICENSE in the root directory of this project.

@include exports('card.clarity') {

    %card-border-appearance {
        box-shadow: $clr-card-box-shadow; //Hardcoded color not in color palette
        border-radius: $clr-global-borderradius;
        border: $clr-card-border;
    }

    %clickable-card-transition {
        box-shadow: 0 0.125rem 0 0 rgba(0, 148, 210, 1);
        border: $clr-default-borderwidth solid rgba(0, 148, 210, 1);
        cursor: pointer;
        text-decoration: none;
        transform: translateY(-2px);
        transition: border 0.2s ease, transform 0.2s ease;
    }

    %card-space-between {
        margin-top: 0;
        margin-bottom: $card-children-space-between;

        &:last-child {
            margin-bottom: 0;
        }
    }

    //Responsive Card Images
    %card-image-appearance {
        display: block;
        height: auto;
        width: 100%;
        max-width: 100%;
    }

    //TODO: Try to reduce the nesting in .card
    .card {
        position: relative;
        display: block;
        background-color: $clr-card-bg-color;
        width: 100%;
        margin-top: 1rem;
        @extend %card-border-appearance;

        .btn-link {
            min-width: 0;

            //NOTE: Set left and right padding of link buttons to 0. aligning these buttons
            //without removing the paddings is a huge task and leads to a brittle card css
            //plus the alignment doesn't work in all the cases
            padding: 0;
        }

        //Clickable Cards
        &.clickable {
            color: inherit;

            &:hover {
                @extend %clickable-card-transition;
            }
        }

        .card-title,
        .card-text,
        .card-media-block,
        .list,
        .list-unstyled {
            @extend %card-space-between;
        }

        //Clarity Lists
        & > .list,
        & > .list-unstyled {
            padding: $card-children-padding-vertical $card-children-padding-horizontal;
        }

        //Bootstrap 4 List Groups
        .list-group-item {
            font-size: $card-text-fontsize;
            border-left-width: 0;
            border-right-width: 0;
            border-color: $clr-light-gray;
            padding: 0.5rem 0.75rem;
        }

        .list-group-item:first-child {
            border-top-color: transparent;
        }

        //Dropdowns

        //NOTE: This is a fix just for dropdowns in Cards in Edge.
        //TODO: Figure out why the caret sign is not aligned next to the dropdown toggle only in cards
        @include fixForMsEdge() {
            .dropdown > .dropdown-toggle::after {
                display: inline-block;
                margin-top: -0.5rem;
            }
        }
    }

    .card-header,
    .card-block,
    .card-footer {
        padding: $card-children-padding-vertical $card-children-padding-horizontal;
    }

    .card-header,
    .card-title {
        @include clr-getTypePropertiesForDomElement(card_title, (color, font-size, font-weight, letter-spacing));
    }

    .card-text {
        font-size: $card-text-fontsize;
    }

    //Images
    .card-img {
        &:first-child > img {
            border-radius: $clr-global-borderradius $clr-global-borderradius 0 0;
        }

        &:last-child > img {
            border-radius: 0 0 $clr-global-borderradius $clr-global-borderradius;
        }

        & > img {
            @extend %card-image-appearance;
        }
    }

    //Card with just an image
    .card.card-img,
    .card > .card-img:first-child:last-child {
        & > img {
            border-radius: $clr-global-borderradius;
            @extend %card-image-appearance;
           }
    }

    .card-block,
    .card-footer {
        .btn,
        .btn.btn-link,
        .card-link {
            margin: 0 $clr-button-horizontal-margin 0 0;
        }

        //Need this level of nesting for now.
        //Adding a TODO to remove the nesting in a separate PR
        //Don't want to create a PR which solves multiple different issues.
        .btn-group .btn {
            margin: 0;
        }
    }

    .card-header,
    .card-block {
        border-bottom: $clr-default-borderwidth solid $clr-card-border-color;

        &:last-child {
            border-bottom: none;
        }
    }

    //Use border-bottom directly on card header and card block to simplify the layout
    //Card dividers should only be used inside of a .card-block
    .card-divider {
        display: block;
        border-bottom: $clr-default-borderwidth solid $clr-card-divider-color;
    }

    .card-block {
        .card-divider {
            @extend %card-space-between;
            margin-left: -1 * ($card-children-padding-horizontal);
            margin-right: -1 * ($card-children-padding-horizontal);
            width: auto;
        }
    }

    //Hide card dividers and just show the border bottom of card-header and card-block
    .card-header, .card-block {
        & + .card-divider {
            display: none;
        }
    }

    //Card Media Block
    .card-media-block {
        display: flex;

        .card-media-image {
            $card-media-image-size: 2.5rem;
            display: inline-block; //to make sure IE10 respects the max-height and max-width
            flex: 0 0 auto;
            height: $card-media-image-size;
            width: $card-media-image-size;
            max-height: $card-media-image-size;
            max-width: $card-media-image-size;
        }

        .card-media-description {
            display: flex;
            flex-direction: column;
            margin: 0 0 0 0.5rem;
        }

        .card-media-title {
            display: inline-block;
        }

        span,
        .card-media-text {
            display: inline-block;
        }

        &.wrap {
            flex-direction: column;

            .card-media-description {
                margin: 0.25rem 0 0 0;
            }
        }
    }

    .card-block {
        & > .list,
        & > .list-unstyled {
            padding: 0;
        }
    }

    //Credit: Bootstrap 4 Card Masonry
    //Added some fixes to avoid flickering in Clickable cards
    //Added extra column classes to control the number of CSS columns
    @media screen and (min-width: map-get($clr-breakpoints, small)) {
        .card-columns {
            column-count: 3;
            column-gap: 0.5rem;
            break-inside: avoid;
            column-fill: balance;

            //Note: Safari Bug Fix for CSS Columns
            //http://stackoverflow.com/a/34998087/3538394
            -webkit-perspective: 1;

            &.card-columns-2 {
                column-count: 2;
            }

            &.card-columns-4 {
                column-count: 4;
            }

            .card {
                display: inline-block; //For some weird reason stops the cards from getting cut off between 2 columns
                margin: 0.25rem;
            }

            .clickable {
                //To fix the flickering issue with clickable card transition
                //http://stackoverflow.com/questions/3461441/prevent-flicker-on-webkit-transition-of-webkit-transform
                backface-visibility: hidden;
            }
        }
    }

    @include fixForMsEdge {
        // Edge did NOT like using display inline-table for button-groups inside of cards...
        .card {
            .checkbox,
            .checkbox-inline,
            .radio,
            .radio-inline {
                &.btn label {
                    display: inline-block;
                }
            }
        }
    }
    }