@require "variables"

// Skin-specific styles go here. Demo-specific styles go in demo/style.styl.

.b-button {
    appearance: none;
    background: Button-backgroundColor;
    border: 1px solid Button-borderColor;
    border-radius: borderRadius;
    color: Button-color;
    cursor: pointer;
    font-size: 14px;
    margin: 0;
    overflow: hidden;
    padding: 0.5rem 0.75rem;
    text-decoration: none;
    vertical-align: middle;
    white-space: nowrap;

    transition: all 200ms ease;

    &[disabled],
    &[disabled]:active,
    &[disabled]:focus,
    &[disabled]:hover {
        background: Button-backgroundColor-disabled;
        border-color: Button-borderColor-disabled;
        color: Button-color-disabled;
        cursor: not-allowed;
        opacity: Button-opacity-disabled;
    }

    &:active {
        background: Button-backgroundColor-active;
        border-color: Button-borderColor-active;
        color: Button-color-active;
    }

    &:focus {
        background: Button-backgroundColor-focus;
        border-color: Button-borderColor-focus;
        color: Button-color-focus;
    }

    &:hover {
        background: Button-backgroundColor-hover;
        border-color: Button-borderColor-hover;
        color: Button-color-hover;
    }
}

.b-button + .b-button {
    margin-left: 15px;
}