.md-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 40px;
    padding: 0 24px;
    border: none;
    border-radius: var(--md-sys-shape-corner-full);
    font-size: var(--md-sys-typescale-label-large-size);
    line-height: var(--md-sys-typescale-label-large-line-height);
    font-weight: var(--md-sys-typescale-label-large-weight);
    letter-spacing: var(--md-sys-typescale-label-large-tracking);
    cursor: pointer;
    position: relative;
    transition:
        box-shadow var(--md-sys-motion-duration-short) var(--md-sys-motion-easing-standard),
        background-color var(--md-sys-motion-duration-short) var(--md-sys-motion-easing-standard);
}

.md-button:disabled {
    cursor: not-allowed;
    opacity: var(--md-sys-state-disabled-opacity);
}

.md-button--filled {
    background: var(--md-sys-color-primary);
    color: var(--md-sys-color-on-primary);
}
.md-button--filled:hover:not(:disabled) {
    box-shadow: var(--md-sys-elevation-level1);
}

.md-button--tonal {
    background: var(--md-sys-color-secondary-container);
    color: var(--md-sys-color-on-secondary-container);
}

.md-button--outlined {
    background: transparent;
    color: var(--md-sys-color-primary);
    border: 1px solid var(--md-sys-color-outline);
}
.md-button--outlined:hover:not(:disabled) {
    background: color-mix(in srgb, var(--md-sys-color-primary) 8%, transparent);
}

.md-button--text {
    background: transparent;
    color: var(--md-sys-color-primary);
    padding: 0 12px;
}
.md-button--text:hover:not(:disabled) {
    background: color-mix(in srgb, var(--md-sys-color-primary) 8%, transparent);
}

.md-button--danger {
    background: var(--md-sys-color-error);
    color: var(--md-sys-color-on-error);
}

.md-icon-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: none;
    border-radius: var(--md-sys-shape-corner-full);
    background: transparent;
    color: var(--md-sys-color-on-surface-variant);
    cursor: pointer;
}
.md-icon-button:hover {
    background: color-mix(in srgb, var(--md-sys-color-on-surface-variant) 8%, transparent);
}
.md-icon-button[aria-pressed='true'] {
    background: var(--md-sys-color-secondary-container);
    color: var(--md-sys-color-on-secondary-container);
}