/* ========================
   Variables
   ======================== */

:root {
    /* Primary */
    --color-btn-primary-bg: var(--color-primary);
    --color-btn-primary-border: var(--color-primary);
    --color-btn-primary-text: var(--color-on-primary);
    --color-btn-primary-bg-hover: var(--color-primary-hover);
    --color-btn-primary-bg-active: var(--color-primary-active);
    --color-btn-primary-bg-focus: var(--color-primary);
    --color-btn-primary-bg-disabled: var(--color-bg-disabled);
    --shadow-btn-primary: 0px 0px 4px rgba(var(--color-primary-rgb), 0.1);
    --shadow-btn-primary-hover: 0px 3px 8px rgba(var(--color-primary-rgb), 0.25);
    --shadow-btn-primary-active: 0px 3px 8px rgba(var(--color-primary-rgb), 0.25);

    /* Secondary */
    --color-btn-secondary-bg: var(--color-secondary);
    --color-btn-secondary-border: var(--color-primary);
    --color-btn-secondary-text: var(--color-on-secondary);
    --color-btn-secondary-bg-hover: var(--color-secondary-hover);
    --color-btn-secondary-bg-active: var(--color-secondary-active);
    --color-btn-secondary-bg-focus: var(--color-secondary);
    --color-btn-secondary-bg-disabled: var(--color-bg-disabled);
    --shadow-btn-secondary: 0px 0px 4px rgba(var(--color-secondary-rgb), 0.1);
    --shadow-btn-secondary-hover: 0px 3px 8px rgba(var(--color-secondary-rgb), 0.25);
    --shadow-btn-secondary-active: 0px 3px 8px rgba(var(--color-secondary-rgb), 0.25);
}

/* ========================
   Estilos Base para Buttons
   ======================== */

.btn.action-btn {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: var(--size-2);
    border: 1px solid;
    box-sizing: border-box;
    border-radius: var(--size-13);
    height: 30px;
    font-weight: 700;
    width: 100%;
    font-size: 0.875rem;
    min-width: 10rem;
    pointer-events: all;
    transition: all var(--time-transition);
}

.btn.action-btn.disabled,
.btn.action-btn:disabled {
    cursor: not-allowed;
    opacity: 1;
}

/* ========================
   Estados del Button
   ======================== */

/* Primary */
.btn.action-btn.primary-btn {
    background-color: var(--color-btn-primary-bg);
    border-color: var(--color-btn-primary-bg);
    box-shadow: var(--shadow-btn-primary);
    color: var(--color-btn-primary-text);
}

.btn.action-btn.primary-btn.btn-icon {
    gap: 10px;
}

.btn.action-btn.primary-btn.btn-icon i.icon-btn {
    display: flex;
    align-items: center;
    font-size: 1.25rem;
    color: var(--color-btn-primary-text);
    justify-content: center;
}

.btn.action-btn.primary-btn:hover {
    background-color: var(--color-btn-primary-bg-hover);
    border-color: var(--color-btn-primary-bg-hover);
    box-shadow: var(--shadow-btn-primary-hover);
}

.btn.action-btn.primary-btn:active:not(:disabled):not(.disabled) {
    background-color: var(--color-btn-primary-bg-active);
    border-color: var(--color-btn-primary-bg-active);
    box-shadow: var(--shadow-btn-primary-active);
}

.btn.action-btn.primary-btn:focus {
    border-color: var(--color-btn-primary-bg-focus);
    box-shadow: none;
}

.btn.action-btn.primary-btn.disabled,
.btn.action-btn.primary-btn:disabled {
    background-color: var(--color-btn-primary-bg-disabled);
    border-color: var(--color-btn-primary-bg-disabled);
}

/* Secondary */
.btn.action-btn.secondary-btn {
    background-color: var(--color-btn-secondary-bg);
    border-color: var(--color-btn-secondary-border);
    box-shadow: var(--shadow-btn-secondary);
    color: var(--color-btn-secondary-text);
}

.btn.action-btn.secondary-btn.btn-icon {
    gap: 10px;
}

.btn.action-btn.secondary-btn.btn-icon i.icon-btn {
    display: flex;
    align-items: center;
    font-size: 1.25rem;
    color: var(--color-btn-secondary-text);
}

.btn.action-btn.secondary-btn:hover {
    background-color: var(--color-btn-secondary-bg-hover);
    border-color: var(--color-btn-secondary-border);
    box-shadow: var(--shadow-btn-secondary-hover);
}

.btn.action-btn.secondary-btn:active:not(:disabled):not(.disabled) {
    background-color: var(--color-btn-secondary-bg-active);
    border-color: var(--color-btn-secondary-border);
    box-shadow: var(--shadow-btn-secondary-active);
}

.btn.action-btn.secondary-btn:focus {
    border-color: var(--color-btn-secondary-border);
    box-shadow: none;
}

.btn.action-btn.secondary-btn.disabled,
.btn.action-btn.secondary-btn:disabled {
    background-color: var(--color-btn-secondary-bg-disabled);
    border-color: var(--color-btn-secondary-border);
}

/* ========================
   Responsive Design (Media Queries)
   ======================== */

/* De 575px para abajo */
@media (max-width: 575px) {
    .btn.action-btn.btn-icon:not(.btn-action-filter) {
        font-size: 0 !important;
        min-width: auto;
        height: 30px;
        width: 35px;
        border-radius: 8px;
        justify-content: center;
        gap: 0 !important;
    }
}