<!-- HTML -->
<button class="btn-fill">Botón Tipo "Fill"</button>

/* CSS */
.btn-fill {
    display: inline-flex;
    padding: var(--spaces-space-sm) var(--spaces-space-md);
    justify-content: center;
    align-items: center;
    gap: var(--spaces-space-xs);
    border-radius: var(--corner-corner-box-sm);
    background: var(--color-global-a-a-state-color-default);
    color: var(--color-white);
    font-size: var(--font-button-text);
    font-weight: var(--font-fontweight-bold);
    border: 2px solid transparent;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
    white-space: nowrap;
}

.btn-fill:hover {
    background: var(--color-global-a-a-state-color-hover);
}
.btn-fill:active {
    background: var(--color-global-a-a-state-color-active);
}
.btn-fill:disabled {
    background: var(--color-global-a-a-state-color-disabled);
    color: var(--color-neutral-neutral);
    cursor: not-allowed;
}

<!-- HTML -->
<button class="btn-outline">Botón Tipo "Outline"</button>
<button class="btn-outline" disabled>Botón Tipo "Outline" (Disabled)</button>

/* CSS */
.btn-outline {
    display: inline-flex;
    padding: var(--spaces-space-sm, 8px) var(--spaces-space-md, 16px);
    justify-content: center;
    align-items: center;
    gap: var(--spaces-space-xs, 4px);
    border-radius: var(--spacing-xs, 4px);
    border: 1px solid var(--color-global-A-A-state-color-default, #0F69C4);
    background: transparent; /* Importante para el botón outline */
    color: var(--color-global-A-A-state-color-default, #0F69C4); /* Color del texto para el estado normal */
    font-size: var(--font-button-text, 16px); /* Ajusta según tus variables de fuente */
    font-weight: var(--font-fontweight-bold, 700); /* Ajusta según tus variables de fuente */
    cursor: pointer;
    transition: all 0.2s ease-in-out;
    white-space: nowrap;
}

.btn-outline:hover {
    border: 1px solid var(--color-global-A-A-state-color-hover, #0F457D);
    color: var(--color-global-A-A-state-color-hover, #0F457D); /* Cambia el color del texto en hover si es necesario */
}

.btn-outline:active {
    /* Puedes definir un estilo específico para el estado activo si lo tienes en Figma */
    /* Por ejemplo, un borde ligeramente más oscuro o un cambio de color de fondo sutil */
}

.btn-outline:disabled {
    border: 1px solid var(--color-path-path-color-disabled, #888);
    color: var(--color-path-path-color-disabled, #888); /* Color del texto para el estado disabled */
    cursor: not-allowed;
    opacity: 0.7; /* Opcional: reducir la opacidad para indicar deshabilitado */
}

<!-- HTML -->
<span class="chip-fill">Chip Fill</span>
<span class="chip-fill disabled">Chip Fill (Disabled)</span>

/* CSS */
.chip-fill {
    display: inline-flex;
    padding: var(--spaces-space-xs, 4px) var(--spaces-space-sm, 8px);
    justify-content: center;
    align-items: center;
    gap: var(--spaces-space-xs, 4px);
    border-radius: var(--corner-corner-box-md, 8px);
    background: var(--color-global-B-B-state-color-default, #5579A2);
    color: var(--color-white, #FFFFFF); /* Color del texto, asumiendo que es blanco por contraste */
    font-size: var(--font-body-sm, 14px); /* Ajusta según tus variables de fuente */
    font-weight: var(--font-fontweight-regular, 400); /* Ajusta según tus variables de fuente */
    white-space: nowrap;
    cursor: default; /* Los chips suelen ser informativos, no interactivos como botones */
    transition: all 0.2s ease-in-out;
}

.chip-fill:hover {
    background: var(--color-global-B-B-state-color-hover, #30435C);
    cursor: pointer; /* Opcional: si el chip es interactivo al hacer hover */
}

.chip-fill.disabled {
    background: var(--color-global-A-A-state-color-disabled, #E7E7E7);
    color: var(--color-neutral-neutral, #888); /* Color del texto para el estado disabled */
    cursor: not-allowed;
}

<!-- HTML para un ícono individual -->
<div class="icon-wrapper">
    <p class="icon-name">Nombre del Ícono</p>
    <span class="icon">
        <!-- Tu código SVG aquí -->
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
            ...
        </svg>
    </span>
</div>

<!-- Ejemplo específico: Ícono Menu -->
<span class="icon">
    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
        <mask id="mask0_2321_1099" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="24" height="24">
            <rect width="24" height="24" fill="#D9D9D9"/>
        </mask>
        <g mask="url(#mask0_2321_1099)">
            <path d="M3 18V16H21V18H3ZM3 13V11H21V13H3ZM3 8V6H21V8H3Z" fill="#4F4F4F"/>
        </g>
    </svg>
</span>

/* CSS */
.icons-display {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spaces-space-lg); /* Espacio entre los iconos */
    justify-content: center;
    align-items: flex-start; /* Para alinear la parte superior de los envoltorios */
    padding: var(--spaces-space-md);
}

.icon-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spaces-space-xs); /* Espacio entre el nombre y el ícono */
    padding: var(--spaces-space-sm);
    border: 1px solid var(--color-neutral-neutral-light);
    border-radius: var(--corner-corner-box-sm);
    background-color: var(--color-background-bg-color-container);
    flex-shrink: 0;
}

.icon-name {
    font-size: var(--font-body-sm);
    color: var(--color-path-path-color-strong);
    margin: 0; /* Eliminar margen predeterminado del párrafo */
    text-align: center;
}

.icon {
    display: inline-flex; /* Asegura que el contenedor del SVG respete el tamaño */
    align-items: center;
    justify-content: center;
    /* Estilos del ícono SVG */
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    aspect-ratio: 1 / 1;
}

/* Para asegurar que el SVG dentro de .icon también herede los tamaños */
.icon svg {
    width: 100%;
    height: 100%;
    display: block; /* Eliminar posibles espacios en blanco inferiores del SVG */
}

/* Si quieres controlar el color de los iconos globalmente con CSS */
/* Puedes cambiar el 'fill' de los path dentro del SVG usando currentColor */
/* Para que esto funcione, los 'fill' en tus SVGs deben ser 'currentColor' */
/* Por ejemplo: <path fill="currentColor"/> */
/* .icon {
    color: var(--color-brand-primary); // o cualquier color variable de tu paleta
}
.icon svg path {
    fill: currentColor; // Sobrescribe el fill si el SVG lo permite
} */

/* Responsive adjustments for icons */
@media (max-width: 768px) {
    .icons-display {
        gap: var(--spaces-space-md);
        justify-content: center;
    }
    .icon-wrapper {
        padding: var(--spaces-space-xs);
    }
    .icon-name {
        font-size: var(--font-body-xs);
    }
}