.button {
    display: flex;
    align-self: flex-start;
    align-items: center;
    justify-content: center;
    border-radius: var(--button-border-radius);
    font-size: var(--button-font-size);
    font-weight: 600;
    text-align: center;
    gap: 8px;

    background-color: transparent;
    border: 2px solid var(--accent-color);
    
    transition: background-color 87ms ease-out, border-color 87ms ease-out;
}
.button:hover {
    box-shadow: 0px 0px 42px 0px rgba(0, 0, 0, .09);
    background-color: var(--information-background-color);
    border-color: transparent;
}
.button:disabled, .button[disabled] {
    cursor: not-allowed;
    opacity: 0.5;
}
.button > a {
    color: inherit;
    text-decoration: none !important;
    padding: var(--button-padding-vertical) var(--button-padding-horizontal);
    font-size: inherit;
}

.button.icon > a, button.button.icon {
    padding: var(--button-padding-vertical) !important;
    line-height: 0 !important;
}

button {
    padding: var(--button-padding-vertical) var(--button-padding-horizontal);
    border: 0px;
    font-family: inherit;
    cursor: pointer;
    display: flex;
    align-self: flex-start;
    align-items: center;
    border-radius: var(--button-border-radius);
    font-size: var(--button-font-size);
    color: inherit;
}

.button.accent {
    background-color: var(--accent-color);
    color: var(--accent-button-text-color);
    border: 0px;
}
.button.accent:hover {
    background-color: var(--accent-color-hover);
}

.button.success {
    background-color: var(--success-color);
    color: var(--secondary-background-color);
    border: 0px;
}
.button.success:hover {
    background-color: var(--success-color-hover);
}

.button.warning {
    background-color: var(--warning-color);
    color: var(--secondary-background-color);
    border: 0px;
}
.button.warning:hover {
    background-color: var(--warning-color-hover);
}

.button.error {
    background-color: var(--error-color);
    color: var(--secondary-background-color);
    border: 0px;
}
.button.error:hover {
    background-color: var(--error-color-hover);
}