@use "vars";

:root {
    --focus-color: #{vars.palette-of(shadow-focus)};

    .isMac {
        --focus-color: rgba(0 103 244 / 0.247);
    }
}

.isWin {
    button {
        font-size: 12px;
    }
}

.isMac {
    button {
        font-size: 13px;
    }
}

button {
    -webkit-appearance: none;
    color: vars.color(fg);
    cursor: pointer;

    background: linear-gradient(
        180deg,
        vars.color(button-gradient-start) 0%,
        vars.color(button-gradient-end) 100%
    );
    border: 1px solid vars.color(button-border);

    border-radius: vars.prop(border-radius);
    padding: 3px 10px 3px;

    &:focus {
        outline: none;
        box-shadow: 0 0 0 1px var(--focus-color);
    }
}

button:hover {
    background: linear-gradient(
        180deg,
        vars.color(button-hover-gradient-start) 0%,
        vars.color(button-hover-gradient-end) 100%
    );
}