.custom-button {
    display: inline-flex;
    padding: 12px;
    padding-inline-start: 24px;
    justify-content: center;
    align-items: center;
    gap: 10px;
    border-radius: 100px;
    text-align: center;
    transition: 0.2s ease;
    cursor: pointer;

    background-color:  var(--accent);
    --svg-fill: var(--accent);
    --svg-bg-fill: var(--white);
    color: var(--white);
}

.custom-button svg, .custom-button svg *{
    transition: 0.2s ease;
}

.custom-button.without-arrow {
    padding: 12px 24px;
}

.custom-button.light {
    background-color:  var(--grey-bg);
    --svg-fill: var(--white);
    --svg-bg-fill: var(--accent);
    color: var(--accent-black);
}

.custom-button.dark {
    background-color:  var(--accent);
    --svg-fill: var(--accent);
    --svg-bg-fill: var(--white);
    color: var(--white);
}

@media (hover:hover){
    .custom-button.light:hover {
        --svg-bg-fill: var(--dark-accent);
    }

    .custom-button:not(.light):hover {
        --svg-fill: var(--dark-accent);
        background-color: var(--dark-accent);
        --svg-bg-fill: var(--white);
    }

    .custom-button.dark:hover {
        background-color:  var(--dark-accent);
        --svg-fill: var(--dark-accent);
        --svg-bg-fill: var(--white);
        color: var(--white);
    }
}

.custom-button.light:active {
    --svg-bg-fill: var(--very-dark-accent);
}

.custom-button:not(.light):active {
    background-color: var(--very-dark-accent);
    --svg-fill: var(--very-dark-accent);
    --svg-bg-fill: var(--white);
}

.custom-button.dark:active {
    background-color:  var(--dark-accent);
    --svg-fill: var(--dark-accent);
    --svg-bg-fill: var(--white);
    color: var(--white);
}

@media (max-width: 1439px) {
    .custom-button{
        padding: 10px;
        padding-inline-start: 20px;
    }

    .custom-button.without-arrow {
        padding: 10px 20px;
    }
}