.jork-icon,
.jork-icon-wrap {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.jork-icon {
    width: 1em;
    height: 1em;
    flex: 0 0 auto;
    vertical-align: middle;
    color: inherit;
}

.jork-icon-wrap {
    line-height: 1;
    color: inherit;
}

/*
 * heart-full: o primeiro grupo é o interior preenchido; o segundo é a borda.
 * As cores originais continuam sendo os valores padrão das variáveis.
 */
.jork-icon-heart-full {
    --jork-heart-full-fill: #727374;
    --jork-heart-full-border: #000000;
}

.jork-icon-heart-full > g:nth-of-type(1) path {
    fill: var(--jork-heart-full-fill, #727374);
}

.jork-icon-heart-full > g:nth-of-type(2) path {
    fill: var(--jork-heart-full-border, #000000);
}

/* Estes ícones herdam a propriedade color do elemento. */
.jork-icon-pause,
.jork-icon-download,
.jork-icon-scroll-down,
.jork-icon-scroll-up,
.jork-icon-tax-left,
.jork-icon-tax-right {
    color: inherit;
}

/* Start possui controles independentes para círculo e símbolo. */
.jork-icon-start {
    --jork-start-background: #292929;
    --jork-start-symbol: #42d901;
}

.jork-icon-start .jork-start-background {
    fill: var(--jork-start-background, #292929);
}

.jork-icon-start .jork-start-symbol {
    fill: var(--jork-start-symbol, #42d901);
}

.jork-icon-library-admin .jork-icon-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 12px;
    max-width: 1100px;
    margin: 20px 0 28px;
}

.jork-icon-library-admin .jork-icon-card {
    display: grid;
    gap: 8px;
    padding: 16px;
    background: #fff;
    border: 1px solid #dcdcde;
    border-radius: 8px;
}

.jork-icon-library-admin .jork-icon-preview {
    color: #000;
    min-height: 42px;
}

.jork-icon-library-admin code {
    overflow-wrap: anywhere;
}