/* Button extension, https://github.com/bauermartincom/yellow-button */

/* Button base, a button without a style class looks like the normal style */

.button {
    display: inline-block;
    box-sizing: border-box;
    padding: 0.55em 1.3em;
    border: 2px solid var(--button-dark, #000);
    border-radius: 3px;
    color: var(--button-dark, #000);
    background-color: transparent;
    font: inherit;
    font-weight: bold;
    line-height: 1.3;
    text-align: center;
    text-decoration: none;
    vertical-align: middle;
    cursor: pointer;
    transition: color 0.15s, background-color 0.15s, border-color 0.15s;
}
.button:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
}
.button + .button {
    margin-left: 0.3em;
}

/* Button styles, one set of colours each */

.button-solid {
    --button-color: var(--button-light, #fff);
    --button-background: var(--button-dark, #000);
    --button-border-color: var(--button-dark, #000);
    --button-color-hover: var(--button-dark, #000);
    --button-background-hover: transparent;
    --button-border-color-hover: var(--button-dark, #000);
}
.button-reverse {
    --button-color: var(--button-dark, #000);
    --button-background: var(--button-light, #fff);
    --button-border-color: var(--button-light, #fff);
    --button-color-hover: var(--button-light, #fff);
    --button-background-hover: transparent;
    --button-border-color-hover: var(--button-light, #fff);
}
.button-normal {
    --button-color: var(--button-dark, #000);
    --button-background: transparent;
    --button-border-color: var(--button-dark, #000);
    --button-color-hover: var(--button-light, #fff);
    --button-background-hover: var(--button-dark, #000);
    --button-border-color-hover: var(--button-dark, #000);
}

/* Button colours, the selectors also cover the link states so that a button keeps
   its look in themes with more specific link rules, for example in the footer */

.button:is(.button-solid, .button-reverse, .button-normal),
.button:is(.button-solid, .button-reverse, .button-normal):is(:link, :visited) {
    color: var(--button-color, currentColor);
    background-color: var(--button-background, transparent);
    border-color: var(--button-border-color, currentColor);
    text-decoration: none;
}
.button:is(.button-solid, .button-reverse, .button-normal):is(:hover, :focus),
.button:is(.button-solid, .button-reverse, .button-normal):is(:link, :visited):is(:hover, :focus) {
    color: var(--button-color-hover, currentColor);
    background-color: var(--button-background-hover, transparent);
    border-color: var(--button-border-color-hover, currentColor);
    text-decoration: none;
}

/* Button sizes */

.button-small {
    padding: 0.35em 0.9em;
    font-size: 0.85em;
}
.button-medium {
    padding: 0.55em 1.3em;
}
.button-large {
    padding: 0.8em 1.8em;
    font-size: 1.15em;
}

/* Optional styles */

.button-full {
    display: block;
    width: 100%;
}
.button-full + .button-full {
    margin: 0.5em 0 0 0;
}
.button-block {
    margin: 1.5rem 0;
}

/* Reduced motion */

@media (prefers-reduced-motion: reduce) {
    .button {
        transition: none;
    }
}