form.button-form {
    display: inline-block;
    padding: 0;
    margin: 0;
}

a.button,
.button {
    --button-height: var(--input-height-regular);
    --button-border: 0px;

    position: relative;
    transition: all 500ms ease;
    cursor: pointer;
    user-select: none;

    display: inline-flex;
    align-items: center;

    color: var(--palette-primary-text);
    background-color: var(--palette-primary-main);

    font-family: var(--regular-font);
    font-weight: bold;
    font-size: var(--font-size-regular);
    box-sizing: border-box;

    min-height: var(--button-height);

    text-decoration: none;

    padding: 0;
    margin: 0;

    border: var(--button-border) solid var(--palette-primary-main);
    border-radius: calc(0.5 * var(--button-radius-ratio) * var(--button-height));

    line-height: 120%;

    overflow: hidden;
    vertical-align: middle;

    box-shadow: var(--shadow-regular);
    margin: var(--shadow-regular-length)
}
    a.button:hover,
    .button:hover {
        transition: all 100ms ease;
        background-color: var(--palette-primary-dim);
    }
    a.button[aria-disabled="true"]:hover,
    a.button[aria-disabled="true"],
    .button:disabled:hover,
    .button:disabled {
        color: var(--palette-secondary-text);
        background-color: var(--palette-action-disabled);
        pointer-events: none;
        cursor: default;
    }
    a.button:focus,
    .button:focus {
        outline: none;
    }
        .button:focus::after {
            display: inline-block;
            content: '';
            width: 100%;
            height: 100%;
            position: absolute;
            left: 0;
            top: 0;
            box-sizing: border-box;
            border: 2px solid var(--palette-action-selected);
            border-radius: calc(0.5 * var(--button-radius-ratio) * var(--button-height));
        }

    .button .button-icon {
        display: inline-block;
        width: calc(var(--button-height) - 2 * var(--button-border));
        border-radius: calc(0.5 * var(--button-radius-ratio) * (var(--button-height) - 2 * var(--button-border)));
        overflow: hidden;
        text-align: center;
    }
        .button .button-icon img {
            width: auto;
            height: auto;
            max-width: calc(0.6 * (var(--button-height) - 2 * var(--button-border)));
            max-height: calc(0.6 * (var(--button-height) - 2 * var(--button-border)));
        }

    .button .button-content {
        flex-grow: 1;
        flex-shrink: 1;
        display: inline-flex;
        align-items: center;
        margin-right: calc(0.6 * var(--input-height-regular));
        margin-left: calc(0.6 * var(--input-height-regular));
    }
        .button .button-icon + .button-content {
            margin-left: calc(0.1 * var(--input-height-regular));
        }

.button.small {
    --button-height: var(--input-height-small);
    --button-border: 1px;

    color: var(--palette-background-text);
    background-color: var(--palette-background-input);

    font-size: var(--font-size-small);

    border: var(--button-border) solid var(--palette-primary-main);

    text-transform: uppercase;

    margin: 2px;

    box-shadow: none;
}
    .button.small:hover {
        color: var(--palette-primary-dim);
        background-color: var(--palette-background-paper);
        border-color: var(--palette-primary-dim);
    }
    .button.small:disabled:hover,
    .button.small:disabled {
        color: var(--palette-action-disabled);
        background-color: var(--palette-background-paper);
        border-color: var(--palette-action-disabled);
    }