.btn {
    outline: none;
    border-radius: var(--size-radius);
    cursor: pointer;
    display: inline-block;
    text-decoration: none;
    /*font-family: Verdana, sans-serif;*/
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.25rem;
    padding: .6em 1em;
    transition: all 20ms ease-out;
    vertical-align: top;
    width: auto;
    margin: 0;
    color: var(--color-text);
    text-shadow: var(--text-shadow);
    background-color: var(--color-bg);
    background-image: linear-gradient(to bottom,var(--color-bg),var(--color-dark-bg));
    border: 1px solid var(--color-border);
    box-shadow: inset 0 1px 0 var(--color-shadow-1),
        inset 0 -1px 0 var(--color-shadow-2),
        inset 0 0 0 1px var(--color-shadow-3), 0 2px 4px rgba(0, 0, 0, 0.2);
}

.btn:not([disabled]) {
}

.btn:not([disabled]):hover,
.btn:not([disabled]):focus {
    color: var(--color-hover-text);
    background: var(--color-hover-bg);
    border-color: var(--color-hover-border);
    box-shadow: inset 0 1px 0 var(--color-shadow-1),
        inset 0 -1px 0 var(--color-shadow-2),
        inset 0 0 0 1px var(--color-shadow-3);
}
.btn:not([disabled]):active {
  background: var(--color-hover-bg);
  box-shadow: inset 0 2px 3px rgba(0, 0, 0, 0.2);
}

.btn[disabled] {
    cursor: not-allowed;
    box-shadow: inset 0 1px 0 var(--color-shadow-1),
        inset 0 -1px 0 var(--color-shadow-2),
        inset 0 0 0 1px var(--color-shadow-3), 0 2px 4px transparent;
}