.fa-icon {
    width: 1em;
    height: 1em;
    vertical-align: -0.125em;
}

.lustre-ui-card {
    /* VARIABLES ------------------------------------------------------------ */

    --background: rgb(var(--lustre-ui-bg));
    --border: rgb(var(--lustre-ui-accent-subtle));
    --border-width: 1px;
    --padding-x: var(--lustre-ui-spacing-xl);
    --padding-y: var(--lustre-ui-spacing-xl);
    --radius: var(--lustre-ui-radius-md);

    /* BASE STYLES ---------------------------------------------------------- */

    background: var(--background);
    border: var(--border-width) solid var(--border);
    border-radius: var(--radius);

    & > * {
        padding-top: 0;
        padding: var(--padding-y) var(--padding-x);
    }

    & > .card-header {
        display: flex;
        flex-direction: column;
    }

    & > .card-footer {
        align-items: center;
        display: flex;
    }
}

.lustre-ui-divider {
    /* VARIABLES ------------------------------------------------------------ */

    --colour: rgb(var(--lustre-ui-accent));
    --gap: var(--lustre-ui-spacing-sm);
    --margin: 0;
    --size-x: 2px;
    --size-y: 0;

    /* BASE STYLES ---------------------------------------------------------- */

    &:empty {
        align-self: stretch;
        border-color: var(--colour);
        border-right-width: var(--size-y);
        border-style: solid;
        border-top-width: var(--size-x);
        margin: var(--margin) 0;
    }

    &:not(:empty) {
        align-items: center;
        align-self: stretch;
        display: flex;
        gap: var(--gap);
        justify-items: center;
        margin: var(--margin) 0;

        &::before,
        &::after {
            background-color: var(--colour);
            content: "";
            display: block;
            flex-grow: 1;
            height: var(--size-x);
            width: var(--size-y);
        }
    }
}