:host {
    display: contents;
    cursor: pointer;
    width: 100%;
    --padding-container: 18px;
}

p-card{
    flex: 1;
}

.card {
    --padding-container: 18px;
    position: relative;
    width: 100%;
    padding: var(--padding-container);
    display: flex;
    height: 184px;
    height: 168px; /* Testing out for smaller screens */
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-start;
    cursor: pointer;
    margin: 0;
    border-radius: 8px;
    border: 1px solid var(--grey-100, #eaeaea);
    background: var(--card-background, #fff);

    container-name: statCard;
    container-type: inline-size;
}

.quotes-header .card {
    height: 84px;
}

form .card {
    height: auto !important;
    width: auto !important
}

form .tab-content{
    width: 100%;
}

.form-group:has(a:first-child + a:last-child){
    width: 100%;
    display: flex;
    gap: var(--gap-small);
}

form .btn-secondary:hover {
    background-color: #6c757d !important;
}

.card :is(.loading-wrapper) {
    min-height: 100% !important;
}

.card__title {
    color: var(--color-accent);
    margin: 0;
    font-size: 36px;
    font-weight: 600;
    line-height: 120%;
}

.card__description {
    margin: 0;
    font-size: 12px;
    font-weight: 500;
}

.card__arrow {
    --_size: 16px;
    --_offset: 10px;
    font-family: "prompt-icons";
    position: absolute;
    top: var(--_offset);
    right: calc(var(--_offset) + var(--gap-small) / 2);
    transition: transform 0.2s ease-in-out;
    color: var(--color-text);
}

.card__action {
    top: calc(var(--_offset) - 4px);
}

.card:hover .card__arrow {
    transform: translateX(4px);
}

.card__arrow::after {
    --icon: "\E12E";
    content: var(--icon);
    font-size: var(--_size);
}

.card[data-loading="true"] > * {
    color: transparent;
    background: var(--grey-100);
}

@container (height < 130px) {
    .card__title {
        font-size: 22px;
    }
}


/* CARD STATES */
.card[data-error="true"] ::after{
    display: none;
}
.card[data-error="true"] .card__arrow{
    animation: none;
    transform: none;
}

p-card[data-variant="solid"] :is(.card__title, .card__description, .icon, .icon-button),
p-card[data-variant="solid-red"] :is(.card__title, .card__description, .icon, .icon-button),
p-card[data-variant="solid-green"] :is(.card__title, .card__description, .icon, .icon-button),
p-card[data-variant="solid-orange"] :is(.card__title, .card__description, .icon, .icon-button),
p-card[data-variant="solid-purple"] :is(.card__title, .card__description, .icon, .icon-button) {
    color: var(--color-white, #fff);
}

p-card[data-variant="custom"] :is(.card__title, .card__description, .icon, .icon-button) {
    color: var(--color-accent, #000);
}

p-card[data-variant] {
    cursor: pointer;
    border-radius: 8px;
    user-select: none;
}
p-card[data-variant]:hover {
    opacity: .8;
    filter: brightness(.98)
}
p-card[data-selected="true"] {
    border: 1px solid #fff;
    box-shadow: 
    0 0 0 1px #fff,
    0 0 0 3px var(--color-accent);
}

p-card[data-selected="true"][data-variant="solid"] {
    border: 1px solid #fff;
    box-shadow: 
    0 0 0 1px #fff,
    0 0 0 3px var(--card-background);
}

/*Responsiveness*/

@media only screen and (max-width: 1050px) {
    .card {
        height: 95px;
    }
}
}


[data-is-button="true"]
{
    .card__description 
    {
        display: none;
    }
    .card__action::before 
    {
        content: "\e049";
        pointer-events: none;
    }
    /*.card-options {
         display: none;
     }*/
}