button {
    background-color: var(--color-grey);
    border: 1px solid transparent;
    border-radius: 20px;
    color: white;
    height: 40px;
    padding: 0px 10px 0px 30px;
    font-size: 0.9em;
    position: relative;
    overflow: hidden;
    z-index: 0;
}

    button span {
        position: relative;
        margin-left: 20px;
        margin-right: 5px;
        z-index: 2; /* El texto siempre estará por encima */
    }

    /* Estilo del icono con efecto de background oscurecido*/
    button::before {
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
        background-size: 20px 20px;
        display: inline-block;
        vertical-align: -0.3em;
        width: 40px;
        height: 100%;
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        background-color: var(--color-darken);
        display: flex;
        justify-content: center;
        z-index: 1;
    }

    /*Efecto de barrido desde el background oscurecido*/
    button::after {
        content: '';
        position: absolute;
        border-radius: 0px 20px 20px 0px;
        top: 0;
        left: 40px;
        height: 100%;
        width: calc(100% - 40px);
        background-color: var(--color-darken);
        transform: scaleX(0);
        transform-origin: left;
        transition: transform 0.4s ease;
        pointer-events: none;
        z-index: 1;
        mix-blend-mode: multiply;
    }

    button:hover::after {
        transform: scaleX(1);
    }

    button:focus {
        outline: none;
        box-shadow: none;
    }

.btn-green {
    background-color: var(--color-green);
}

.btn-red {
    background-color: var(--color-red);
}

.btn-grey {
    background-color: var(--color-grey);
}

.btn-violet {
    background-color: var(--color-violet);
}

.btn-light {
    background-color: var(--color-violet);
}

.btn-login::before {
    background-image: url('../images/login.png');
}

.btn-add::before {
    background-image: url('../images/add_simple.png');
}

.btn-cancel::before {
    background-image: url('../images/cancel.png');
}

.btn-ok::before {
    background-image: url('../images/ok.png');
}

.btn-delete::before {
    background-image: url('../images/delete.png');
}

.btn-reset::before {
    background-image: url('../images/reset.png');
}

.btn-round {
    width: 30px;
    height: 30px;
    border-radius: 15px;
    padding: 0px;
}

    .btn-round > img {
        width: 100%;
        height: 100%;
        filter: contrast(0) brightness(100);
    }

.pagerGroup {
    height: 40px;
    border-radius: 20px;
    display: flex;
    align-items: center;
    padding: 5px 10px;
    gap: 20px;
    background-color: var(--color-backgroundMenu);
}

    .pagerGroup > button {
        width: 30px;
        height: 30px;
        border-radius: 15px;
        padding: 0px;
        background-color: transparent;
    }

        .pagerGroup > button::before {
            display: none;
        }

        .pagerGroup > button > img {
            width: 100%;
            height: 100%;
            filter: invert(42%) sepia(1%) saturate(2391%) hue-rotate(131deg) brightness(110%) contrast(72%);
        }

@media (prefers-color-scheme: dark) {
    .pagerGroup > button > img {
        filter: invert(100%) sepia(100%) saturate(0%) hue-rotate(241deg) brightness(103%) contrast(103%);
    }
}