/* 
    Chips 
*/
.chip {
    --chip-bg-color: var(--color-primary);
    --chip-bg-color-hover: var(--color-primary-alt);
    --chip-text-color: var(--color-primary-contrast);
    --chip-text-color-hover: var(--color-primary-contrast);

    --chip-padding-x: 1.5rem;
    --chip-padding-y: 0;
    --chip-border-radius: 2.4rem;
    --chip-min-height: 2.4rem;
    --chip-gap: 1rem;

    --chip-font: var(--body-font);
    --chip-font-size: 1.4rem;
    --chip-font-weight: 700;
    --chip-line-height: 1.1;

    /* Corners */
    border-radius: var(--chip-border-radius);

    /* Border */
    border: 0 none;

    /* Spacing and Size */
    padding: var(--chip-padding-y) var(--chip-padding-x);
    margin: 0;
    min-height: var(--chip-min-height);
    vertical-align: middle;
    width: auto;
    overflow: hidden;

    /* Grid and Icons */
    display: inline-flex;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
    gap: 1rem;

    /* Text */
    font-family: var(--chip-font);
    font-size: var(--chip-font-size);
    font-style: normal;
    font-weight: var(--chip-font-weight);
    line-height: var(--chip-line-height);
    text-decoration: none;

    /* Colors */
    color: var(--chip-text-color);
    background-color: var(--chip-bg-color);
}

/* 
    Hover 
*/
@media (-moz-touch-enabled: 0), (pointer: fine) {
    .chip {
        transition: .2s ease-in-out;
    }

    .chip:hover {
        color: var(--chip-text-color-hover);
        background-color: var(--chip-bg-color-hover);
    }
}


/*
    Button Colors
*/
.chip-primary {
    --chip-bg-color: var(--color-primary);
    --chip-bg-color-hover: var(--color-primary-alt);
    --chip-text-color: var(--color-primary-contrast);
    --chip-text-color-hover: var(--color-primary-contrast);
}

.chip-secondary {
    --chip-bg-color: var(--color-secondary);
    --chip-bg-color-hover: var(--color-secondary-alt);
    --chip-text-color: var(--color-secondary-contrast);
    --chip-text-color-hover: var(--color-secondary-contrast);
}

.chip-tertiary {
    --chip-bg-color: var(--color-tertiary);
    --chip-bg-color-hover: var(--color-tertiary-alt);
    --chip-text-color: var(--color-tertiary-contrast);
    --chip-text-color-hover: var(--color-tertiary-contrast);
}

.chip-black {
    --chip-bg-color: var(--color-black);
    --chip-bg-color-hover: var(--color-black-alt);
    --chip-text-color: var(--color-black-contrast);
    --chip-text-color-hover: var(--color-black-contrast);
}

.chip-white {
    --chip-bg-color: var(--color-white);
    --chip-bg-color-hover: var(--color-white-alt);
    --chip-text-color: var(--color-white-contrast);
    --chip-text-color-hover: var(--color-white-contrast);
}

.chip-success {
    --chip-bg-color: var(--color-success);
    --chip-bg-color-hover: var(--color-success-alt);
    --chip-text-color: var(--color-success-contrast);
    --chip-text-color-hover: var(--color-success-contrast);
}

.chip-info {
    --chip-bg-color: var(--color-info);
    --chip-bg-color-hover: var(--color-info-alt);
    --chip-text-color: var(--color-info-contrast);
    --chip-text-color-hover: var(--color-info-contrast);
}

.chip-warning {
    --chip-bg-color: var(--color-warning);
    --chip-bg-color-hover: var(--color-warning-alt);
    --chip-text-color: var(--color-warning-contrast);
    --chip-text-color-hover: var(--color-warning-contrast);
}

.chip-error {
    --chip-bg-color: var(--color-error);
    --chip-bg-color-hover: var(--color-error-alt);
    --chip-text-color: var(--color-error-contrast);
    --chip-text-color-hover: var(--color-error-contrast);
}