@import '../core/theme.scss';
@import '../../helpers/_selectors';

/* CARDS */
.card {
    background-color: #fff;
    backface-visibility: hidden;
    border-radius: 5px;
    box-shadow: 0px 5px 12px 0 rgba(42, 51, 83, 0.12), 0px 0px 5px rgba(0, 0, 0, 0.06);
    margin-bottom: 1rem;
    overflow: hidden;
    position: relative;
    transition: all 0.3s;

    &:hover {
        transition: all 0.3s;
        box-shadow: 0px 8px 20px 0 rgba(42, 51, 83, 0.12), 0 5px 5px rgba(0, 0, 0, 0.06);

        .card-image::after {
            opacity: 0;
        }
    }

    &.slide-up, &.card--slide-up {
        display: flex;
        flex-direction: column;
        max-height: 550px;

        &:hover {
            .card-body, .card__body {
                opacity: 1;
            }
            .card-image, .card__image {
                transform: translateY(-40px);
            }
            .mobile-title, .card__mobile-title {
                bottom: 35%;
                transition: all 0.3s ease-in-out;
            }
        }

        /* More card components in second example */
        .mobile-title, .card__mobile-title {
            position: absolute;
            left: 0;
            bottom: 5rem;
            background-color: var(--cirrus-bg);
            -moz-transition: 0.3s ease-in-out;
            -ms-transition: all 0.3s ease-in-out;
            transition: 0.3s ease-in-out;
            width: 100%;
            padding: 1.5rem 0 0 0;
            backface-visibility: hidden;
        }

        .card-body, .card__body {
            opacity: 0;
            overflow: auto;
            transition: all var(--animation-duration) ease-in-out;
        }
    }

    /* Allow for the cards to have the same height when u-flex is used on the card */
    &.u-flex .content {
        flex-grow: 1;
    }

    p {
        margin: 1rem 0;
    }

    .card-image, .card__image {
        bottom: 0;
        left: 0;
        position: absolute;
        right: 0;
        top: 0;
        border-radius: 5px 5px 0 0;
        background-size: cover;
        background-repeat: no-repeat;
        transition: all 0.3s ease-in-out;

        &::after {
            content: '';
            display: block;
            position: absolute;
            background-color: rgba(0, 0, 0, 0.1);
            top: 0;
            left: 0;
            right: 0;
            transition: all 500ms;
            bottom: 0;
        }
    }

    .card-container, .card__container {
        display: block;
        position: relative;
        height: 40%;
        min-height: 21rem; /* So it appears in html5 standards mode */
    }

    .title-container, .card__title-container {
        position: absolute;
        bottom: 1rem;
        width: 100%;
        padding: 0 1rem;

        .title,
        .subtitle {
            color: #fff;
            margin: 1rem auto;
        }

        .title {
            font-weight: 300;
            font-size: 1.5rem;
            margin-bottom: 0;
            text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
        }
    }

    .action-bar, .card__action-bar {
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
        padding: 0.5rem;
        margin: 0;
        border-top: 1px solid map-get($grays, '200');
        box-sizing: border-box;
        transition: left 200ms cubic-bezier(0.075, 0.82, 0.165, 1);

        /* Add some padding to the buttons */
        #{$button-selectors} {
            margin: 0 0.5rem;
        }

        & + .card-footer, & + .card__footer {
            padding: 1rem 0;
            border-top: 1px solid map-get($grays, '200');
        }
    }

    .card-footer, .card__footer {
        position: relative;
        font-size: 0.75rem;
        color: map-get($grays, '600');
    }

    /*
    NOTE: To have cards with the same height, place the card class with col-x classes and have the parent have fluid-container.
*/

    /* Card Title Bar */
    .card-head, .card__header {
        align-items: stretch;
        -webkit-box-align: stretch;
        display: flex;
        display: -webkit-box;
        display: -ms-flexbox;
        border-bottom: 1px solid map-get($grays, '200');
    }
}