@use "../../core";
@use "../../core/size";
@use "variables" as *;

.card {
    padding: core.densify(size.$padding-100) size.$padding-100;
    margin: core.densify(size.$margin-100) 0;

    &--default {
        background-color: $card-color-background;
        border-radius: var(--f-border-radius-medium);
        border: var(--f-border-width-medium) solid $card-color-border;
    }

    &--error {
        background-color: $card-color-background;
        border-radius: var(--f-border-radius-medium);
        border: var(--f-border-width-medium) solid $card-color-border-error;
    }

    &__content {
        color: $card-color-text;
        > p,
        > div {
            &:last-child {
                margin-bottom: 0;

                > *:last-child {
                    // Disable eventually margin from vue-components (wraps all components in an extra div)
                    margin-bottom: 0;
                }
            }
        }
    }

    &__header {
        &-label {
            color: $card-color-heading;
            font-size: var(--f-font-size-large);
            font-weight: var(--f-font-weight-bold);
            line-height: var(--f-line-height-large);
            margin-bottom: core.densify(size.$margin-025);
            display: block;
        }
    }

    &__footer {
        padding-top: core.densify(size.$padding-125);

        > .button-group {
            margin-bottom: 0;

            .button-group__item {
                margin-bottom: 0 !important;
            }
        }
    }

    &__error-message {
        color: $card-color-text-error;
    }
}