import { css } from 'lit'

export default css`
    :host {
        --border-color: var(--terra-panel-border-color);
        --border-radius: var(--terra-border-radius-medium);
        --border-width: var(--terra-panel-border-width);
        --padding: var(--terra-spacing-large);

        display: inline-block;
    }

    .card {
        display: flex;
        flex-direction: column;
        background-color: var(--terra-panel-background-color);
        box-shadow: var(--terra-shadow-x-small);
        border: solid var(--border-width) var(--border-color);
        border-radius: var(--border-radius);
    }

    .card__image {
        display: flex;
        border-top-left-radius: var(--border-radius);
        border-top-right-radius: var(--border-radius);
        margin: calc(-1 * var(--border-width));
        overflow: hidden;
    }

    .card__image::slotted(img) {
        display: block;
        width: 100%;
    }

    .card:not(.card--has-image) .card__image {
        display: none;
    }

    .card__header {
        display: block;
        border-bottom: solid var(--border-width) var(--border-color);
        padding: calc(var(--padding) / 2) var(--padding);
    }

    .card:not(.card--has-header) .card__header {
        display: none;
    }

    .card:not(.card--has-image) .card__header {
        border-top-left-radius: var(--border-radius);
        border-top-right-radius: var(--border-radius);
    }

    .card__body {
        display: block;
        padding: var(--padding);
    }

    .card--has-footer .card__footer {
        display: block;
        border-top: solid var(--border-width) var(--border-color);
        padding: var(--padding);
    }

    .card:not(.card--has-footer) .card__footer {
        display: none;
    }
`
