@import 'colors.scss';
@import 'typography.scss';
/* @import url('https://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800'); */

$body-font-family: "Open Sans",sans-serif;
$body-font-color: $col_trimble_gray;

$button-radius: 2px;

$box-sizing-borderbox:  border-box;


@mixin border-radius($radius) {
  -webkit-border-radius: $radius;
     -moz-border-radius: $radius;
      -ms-border-radius: $radius;
          border-radius: $radius;
}

/* @mixin border-radius{
  border-radius: 2px;
} */

@mixin shadow-none{
  box-shadow:none;
}

/* box-shadow: 0 2px 4px 0 rgba(0,0,0,0.2); */

@mixin shadow-small{
  box-shadow: $card-shadow-small;
}

@mixin shadow-medium{
  box-shadow: $card-shadow-default; 
}

@mixin shadow-large{
  box-shadow: $card-shadow-large;
}

@mixin border-circle{
  border-radius: 50%;
}

@mixin vertical-center{ 
  display:flex;
  align-items: center;
  justify-content: center;
}

@mixin row-flex-end{ 
  display:flex;  
  justify-content: flex-end;
}

.end{
  @include row-flex-end;
}

@mixin text-ellipsis{
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@mixin text-left {
  text-align: left;
}
@mixin text-right {
  text-align: right;
}
@mixin text-center {
  text-align: center;
}
@mixin text-justify {
  text-align: justify;
}
@mixin text-nowrap {
  white-space: nowrap;
}
@mixin text-lowercase {
  text-transform: lowercase;
}
@mixin text-uppercase {
  text-transform: uppercase;
}
@mixin text-capitalize {
  text-transform: capitalize;
}


@mixin page-header{
  margin: 0.75rem;
 @include flex-row-center;
 h1{
   @extend %h1;
   color: $col_trimble_blue_mid;
 }
/*   h2{
    font-size: $font-page-header;
    line-height: $font-page-header;
    color: $col_trimble_blue_mid;
    font-weight: 300;
  } */
  .search {
    margin: 0 0.75rem;
  }
  .right{
    margin-left: auto;
    @include flex-row-center;
  }
}

@mixin flex-row{
  display: flex;
  flex-flow:row nowrap;
}

@mixin flex-row-wrap{
  display: flex;
  flex-flow:row wrap;
}

@mixin flex-row-center{
  display: flex;
  flex-flow:row nowrap;
  align-items: center;
}

@mixin flex-row-h-center{
  display: flex;
  flex-flow:row nowrap;
  align-items: center;
  justify-content: center;
}

.align-center{
  @include flex-row-h-center;
}


@mixin flex-row-distribute{
  display: flex;
  flex-flow:row nowrap;
  align-items: center;
  justify-content: space-between;
}

@mixin flex-column{
  display: flex;
  flex-flow:column nowrap;  
}


@mixin flex-column-center{
  display: flex;
  flex-flow:column nowrap;
  align-items: center;
}

@mixin transition{
  -webkit-transition: all 0.2s ease;
  -moz-transition:    all 0.2s ease;
  -ms-transition:     all 0.2s ease;
  -o-transition:      all 0.2s ease;
}

@mixin card{
  @include border-radius(2px);
  background-color:$col_white;
  @include shadow-medium;       
  margin:0.75rem 0 0.75rem 0;
  box-sizing: border-box;  
}

@mixin card-padding{
  padding:1rem 1rem 0.75rem;
}

@mixin card-states{
  background-color:$card-bg-color;
  border:solid 1px transparent; 
    &:hover,&.active,&.selected{
      background-color:$card-hover-color;
      cursor:pointer;
      border:solid 1px $col_trimble_blue_light;
      h4,p{
          color:$col_trimble_blue_mid;
      }
  } 
}