/* ==========================================================
   FAUNA DESIGN SYSTEM
   COMPONENTS — V1
   ========================================================== */


/* ICON ---------------------------------------------------- */

.fds-icon {
    width: 20px;
    height: 20px;

    flex: 0 0 20px;

    display: inline-grid;
    place-items: center;

    color:
        currentColor;
}


/* ICON TILE ----------------------------------------------- */

.fds-icon-tile {
    width: 38px;
    height: 38px;

    display: grid;
    place-items: center;

    border-radius:
        var(--fds-radius-sm);

    background:
        var(--fds-primary-soft);

    color:
        var(--fds-primary);
}


/* BADGE --------------------------------------------------- */

.fds-badge {
    display: inline-flex;
    align-items: center;

    min-height: 27px;

    padding:
        0
        9px;

    border-radius:
        var(--fds-radius-pill);

    background:
        var(--fds-surface-soft);

    color:
        var(--fds-text);

    font-size:
        var(--fds-text-xs);

    font-weight: 750;
}


.fds-badge-primary {
    background:
        var(--fds-primary-soft);

    color:
        var(--fds-primary-strong);
}


.fds-badge-success {
    background:
        var(--fds-success-soft);

    color:
        var(--fds-success);
}


.fds-badge-warning {
    background:
        var(--fds-warning-soft);

    color:
        var(--fds-warning);
}


/* BUTTON -------------------------------------------------- */

.fds-button {
    min-height: 44px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 8px;

    padding:
        0
        17px;

    border:
        1px solid
        transparent;

    border-radius:
        var(--fds-radius-sm);

    font-family:
        var(--fds-font);

    font-size:
        var(--fds-text-sm);

    font-weight: 720;

    text-decoration: none;

    cursor: pointer;

    transition:
        transform
        var(--fds-fast)
        var(--fds-ease),

        box-shadow
        var(--fds-fast)
        var(--fds-ease);
}


.fds-button:hover {
    transform:
        translateY(-1px);
}


.fds-button-primary {
    background:
        var(--fds-ink);

    color: #fff;
}


.fds-button-secondary {
    border-color:
        var(--fds-line);

    background:
        var(--fds-surface);

    color:
        var(--fds-ink);
}


/* STAT ---------------------------------------------------- */

.fds-stat {
    display: grid;

    gap: 4px;
}


.fds-stat span {
    color:
        var(--fds-muted);

    font-size:
        var(--fds-text-xs);
}


.fds-stat strong {
    color:
        var(--fds-ink);

    font-size:
        18px;
}


/* STATUS DOT ---------------------------------------------- */

.fds-status-dot {
    width: 8px;
    height: 8px;

    display: inline-block;

    border-radius:
        50%;

    background:
        var(--fds-primary);
}


.fds-status-dot.success {
    background:
        var(--fds-success);
}


.fds-status-dot.warning {
    background:
        var(--fds-warning);
}