/* Widget "icon_list" — los íconos salen como <svg> inline (Karnak_Icons,
   tamaño base en karnak-frontend-core.css); la hoja de Dashicons/Font
   Awesome solo se encola para un ícono sin trazo SVG conocido (ver
   Karnak_Widget_Assets::enqueue_icon_set()). */
.karnak-icon-list {
    --kil-icon-color:    currentColor;
    --kil-icon-size:     20px;
    --kil-icon-bg:       transparent;
    --kil-icon-radius:   0px;
    --kil-text-color:    inherit;
    --kil-text-size:     1rem;
    --kil-text-weight:   400;
    --kil-text-font:     inherit;
    --kil-icon-gap:      10px;
    --kil-item-gap:      10px;
    --kil-divider-color: rgba(0,0,0,.1);
    --kil-divider-size:  1px;
    display:    flex;
    flex-direction: column;
    gap:        var(--kil-item-gap);
    margin:     0 !important;
    padding:    0 !important;
    list-style: none !important;
}
.karnak-icon-list--horizontal {
    flex-direction: row;
    flex-wrap:      wrap;
}
.karnak-icon-list-item {
    display:    block;
    list-style: none !important;
}
.karnak-icon-list--divider .karnak-icon-list-item {
    padding-bottom: var(--kil-item-gap);
    border-bottom:  var(--kil-divider-size) solid var(--kil-divider-color);
}
.karnak-icon-list--divider .karnak-icon-list-item:last-child {
    padding-bottom: 0;
    border-bottom:  none;
}
.karnak-icon-list-link {
    display:         flex;
    align-items:     center;
    gap:             var(--kil-icon-gap);
    color:           inherit;
    text-decoration: none;
}
.karnak-icon-list--icon-top .karnak-icon-list-link {
    flex-direction: column;
    align-items:    flex-start;
}
.karnak-icon-list-icon {
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    width:           var(--kil-icon-size);
    height:          var(--kil-icon-size);
    background:      var(--kil-icon-bg);
    border-radius:   var(--kil-icon-radius);
    color:           var(--kil-icon-color);
    flex-shrink:     0;
}
/* El slot ya mide --kil-icon-size; el SVG (1em) toma ese mismo tamaño acá. */
.karnak-icon-list-icon .karnak-svg-icon { font-size: var(--kil-icon-size); }
.karnak-icon-list-icon .dashicons,
.karnak-icon-list-icon i {
    width:     100%;
    height:    100%;
    font-size: var(--kil-icon-size);
    line-height: 1;
}
.karnak-icon-list-text {
    color:       var(--kil-text-color);
    font-size:   var(--kil-text-size);
    font-weight: var(--kil-text-weight);
    font-family: var(--kil-text-font);
}