@import "../variables";
@import "~cosmoUiVariables";

$button-font-size: 11px;
$button-padding-x: 25px !default;
$button-padding-y: 10px !default;
$button-padding-x-condensed: 12px !default;
$button-padding-y-condensed: 6px !default;
$button-border-radius: $border-radius-sm !default;
$button-border: none !default;



$button-fg: $white !default;
$button-bg: $brand-primary !default;
$button-fg-hover: darken($button-fg, 5%) !default;
$button-bg-hover: darken($button-bg, 5%) !default;

$button-fg-primary: $white !default;
$button-bg-primary: $black !default;
$button-fg-hover-primary: darken($button-fg-primary, 5%) !default;
$button-bg-hover-primary: darken($button-bg-primary, 5%) !default;


.container {
    margin: 0 5px;
    min-width: 120px;

    color: $button-fg;
    background-color: $button-bg;
    font-size: $button-font-size;
    text-transform: uppercase;
    font-weight: bold;
    padding: $button-padding-y $button-padding-x;
    border-radius: $button-border-radius;
    border: $button-border;
    cursor: pointer;

    &:hover {
        color: $button-fg-hover;
        background-color: $button-bg-hover;
    }
}

.primary {
    color: $button-fg-primary;
    background-color: $button-bg-primary;
    &:hover {
        color: $button-fg-hover-primary;
        background-color: $button-bg-hover-primary;
    }
}

.disabled {
    opacity: 0.5
}

.condensed {
    padding: $button-padding-y-condensed $button-padding-x-condensed;
    min-width: 80px;
}