/* ============================================================================
   06-COMPONENTS -> #CARD
   ========================================================================= */

/**
 * A container for content representing a single entity. e.g. a contact,
 * article, or task.
 */


//
// SCSS imports
//

@use '../01-settings' as *;
@use '../02-tools' as *;


/**
 * Card
 */

.card {
    --card-bg: var(--bg-secondary);
    --card-border-color: var(--border-color-secondary);
    --card-border-radius: var(--rounded-md);
    --card-border-width: var(--border-width);

    @include transition(('background-color', 'border-color'));
    background-color: var(--card-bg);
    border: var(--card-border-width) solid var(--card-border-color);
    border-radius: var(--card-border-radius);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    position: relative;
}


/**
 * Card icon
 */

.card__icon {
    flex-shrink: 0;
}


/**
 * Card header
 */

.card__header {
    flex: 1 1 auto;
    padding: var(--card-padding-y) var(--card-padding-x);

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

    & ~ .card__body {
        padding-top: 0;
    }
}


/**
 * Card content
 *
 * 1. Remove 'padding-top' if the card body follows the card header.
 */

.card__content {
    padding: var(--card-padding-y) var(--card-padding-x);
    flex: 1 1 auto;

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

    * + & {
        border-top: var(--card-border-width) solid var(--card-border-color);
    }
}


/**
 * Card footer
 *
 * 1. Remove 'padding-top' if the card body follows the card header.
 */

.card__footer {
    flex: 1 1 auto;
    padding: var(--card-padding-y) var(--card-padding-x);

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

    * + & {
        border-top: var(--card-border-width) solid var(--card-border-color);
    }
}