button {
    align-items:   center;
    background:    var(--col-pri);
    border-radius: 10px;
    border:        none;
    box-sizing:    border-box;
    color:         #fff;
    cursor:        pointer;
    display:       flex;
    height:        30px;
    margin:        10px 5px 0 5px;
    padding:       0 9px 0 9px;
    user-select:   none;
}

button > img, button > svg {
    height:       15px;
    margin-right: 5px;
    width:        15px;
}

@media (hover: none) and (pointer: coarse) {
    button > ::deep :not(:first-child) {
        display: none;
    }

    button > img, button > svg {
        height:       20px;
        margin-right: 0;
        padding:      8px;
        width:        20px;
    }

    /* disable hotkey underlines on mobile devices */
    ::deep button > ::deep u {
        text-decoration: none !important;
    }
}

@media(hover: hover) {
    button:hover:not(:active) {
        filter: brightness(1.2) saturate(0.5);
    }
}

button:active {
    background: #fff;
    color:      var(--col-pri);
}


button:disabled {
    color:      var(--col-button-disabled)    !important;
    background: var(--col-button-disabled-bg) !important;
}

button.error {
    animation-iteration-count: 3;
    animation-timing-function: linear;
    animation:                 button-error 0.2s;
}

button > svg.loading {
    animation:        loading-spin 1s linear infinite;
    transform-origin: center;
    will-change:      transform;
}

@keyframes button-error {
      0% { transform: translateX(0);    }
     33% { transform: translateX(-5px); }
     66% { transform: translateX(+5px); }
    100% { transform: translateX(0);    }
}

@keyframes loading-spin {
      0% { transform: rotate(0deg);   }
    100% { transform: rotate(360deg); }
}