@import url('parameters.css');

.button {
    color: var(--color-text-button) !important;
    background-color: var(--color-background-button-dark) !important;
    text-decoration-line: underline;
    text-decoration-style: solid;
    text-decoration-color: var(--color-text-button) !important;
    text-decoration-thickness: from-font;
    text-underline-offset: var(--button-underline-offset); 
    font-weight: var(--font-weight-bold) !important;
    overflow: hidden; 
    /* transition: all 0.25s cubic-bezier(0.310, -0.105, 0.430, 1.400); */
    place-self: start;
    border-radius: var(--corner-radius-sm);
    padding: calc(var(--button-padding-y) + var(--button-underline-offset)) var(--button-padding-x); /*per evitare che il text-underline-offset tolga padding*/
}

.button-primary {
    background-color: var(--color-background-button-primary) !important;
}

.button-small[disabled] {
    text-decoration: none !important;
    background-color: var(--color-background-button-disabled) !important;
    padding: var(--button-padding-small-y) var(--button-padding-small-x);
}

/* .button-outlined {
    background-color: transparent !important;
    border: 2px solid var(--color-background-button-dark);
} */

/* .button-sm {
    padding: var(--spacing-16) var(--spacing-24);
    font-size: var(--font-size-xs);
    margin-bottom: 0;
} */

    /* Hover/success effect */
    .button:hover,
    .button.hover {
        filter: brightness(1.5);
        background-color: var(--color-background-button-dark-hover);
    }

        .button.button-primary:hover,
        .button.button-primary.hover {
            background-color: var(--color-background-button-primary-hover) !important;
        }

        .button:hover div,
        .button.hover div {
            transform: translateX(-48%);
        }

            .button:hover div span,
            .button.hover div span {
                opacity: 0;
            }

            .button:hover div i,
            .button.success div i {
                transform: scale(2.5);
            }

button[disabled], 
.button[disabled] {
    pointer-events: none !important;
}