/*
Buttons

Buttons styles from trimble css

Markup:
<div>
<button class="button default">default button</button>
</div>
<br/>
<div>
<button class="button small">small button</button>
</div>
<br/>
<div>
<button class="button expanded">expanded button</button>
</div>
<br/>
<div>
<button class="button small">
    <i class="icon add"></i>icon button
</button> 
</div>
<br/>
<div>
<button class="button default" disabled="disabled">Disabled button</button>
</div>
<br/>
<div>
<button class="button secondary">Secondary button</button>
</div>

Styleguide Form Elements.button
*/

@import 'colors.scss';
@import 'variables.scss';



@mixin button {
    background-color:$col_trimble_blue_mid;
    color:$col_white;
    outline: 0;
    border: none;
    @include border-radius(2px);
    @include  text-uppercase;
    margin-left: 0.5rem;
    font-size: $font-size-small;
    display: flex;
    cursor: pointer;
    justify-content: center;
    &:hover{
        background-color:$col_blue_light;
    }
    &:focus{
        background-color:$col_blue_dark;
    }
}

@mixin hollow-button{
    height: 40px;
    line-height: 40px;
    background:none;
    border:none;
    padding:0;
    color:$col_trimble_blue_mid;
    font-size: $font-size-regular;
    &:hover{
        background-color:transparent;
    }
    &:focus{
        background-color:transparent;
    }
}

@mixin button-default{
    height: 40px;
    line-height: 40px;
    padding: 0 2rem;
    font-size: $font-size-regular;
}

@mixin button-secondary {
  @include button-default;
  background-color: $col_trimble_gray;
  color: $col_gray_light;
}

@mixin button-small{
    height: 32px;
    line-height: 32px;
    padding: 0 1rem;
}

@mixin button-expanded{
    @include button-default;
    width: 100%;
}

@mixin icon-w-text{
    padding-left:0
}

button, .button{
    @include button;
    &.clear{
        @include hollow-button;
    }
    &.default{
        @include button-default;
    }
    &.small{
        @include button-small;
    }
    &.expanded{
        @include button-expanded;
    }
    &.secondary{
      @include button-secondary;
    }
    &.icon-w-text{
      @include icon-w-text;
    }
    i{
        width: 32px;
        height: 32px;
        &.add{
            background-image:url('../images/Icons/icon_add.svg');
            background-repeat: no-repeat;
            filter: grayscale(100%) brightness(5);
        }        
    }

}

.disabled,.button:disabled,button[disabled]{  
    opacity:.4;
    cursor: not-allowed;
  }