// Buttons
.button{
  cursor:pointer;
  position:relative;
  transition-duration:0.2s;
  transition-property:border color background;
  display:inline-block;
  border:1px solid $blue;
  color:$white;
  background-color:$blue;
  text-decoration:none;
  border-radius:4px;
  box-shadow:2px 4px 4px 0 rgba(0,0,0,0.05);
  font-family:Graphik, "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;;
  font-size:13px;
  line-height:19px;
  font-weight:500;
  padding:14px 21px 15px 21px;
  
  &.disabled{
    pointer-events:none;
    
  }
  
  &:focus{
    outline:0;
  }
  
  &.small{
    font-weight:400;
    margin-right:12px;
    font-size: 13px;
    line-height: 15px;
    padding: 8px 14px;

    &:last-child{
      margin-right:0;
    }
    
    .icon-check{
      width:18px;
      height:18px;
    }
    
    .icon-retry{
      width:18px;
      height:18px;
    }
  }
  
  // Solid
  
  &.red{
    border-color:$red-light;
    background-color:$red-light;
    color:$white;
  }
  
  &.blue{
    border-color:$blue;
    background-color:$blue;
    color:$white;
  }
  
  &.blue_dark{
    border-color:$blue-dark;
    background-color:$blue-dark;
    color:$white;
  }
  
  &.blue_med{
    border-color:$blue-med;
    background-color:$blue-med;
    color:$white;
  }
  
  &.blue_light{
    border-color:$blue-light;
    background-color:$blue-light;
    color:$white;
  }

  &.black{
    border-color:$blue_black;
    background-color:$blue_black;
    color:$white;
  }
  
  &.yellow{
    border-color:$yellow;
    background-color:$yellow;
    color:$blue-dark;
  }
  
  &.white{
    background-color:$white;
    border-color:$white;
    color:$blue;
  }
  
  // Hover
  
  &.hover-red{
    &:hover{
      border-color:$red;
      background-color:$red;
      color:$white;
    }
  }
  
  &.hover-blue{
    &:hover{
      border-color:$blue;
      background-color:$blue;
      color:$white;
    }
  }
  
  &.hover-blue-dark{
    &:hover{
      border-color:$blue-dark;
      background-color:$blue-dark;
      color:$white;
    }
  }

  &.hover-black{
    &:hover{
      border-color:$blue-black;
      background-color:$blue-black;
      color:$white;
    }
  }
  
  &.hover-blue-med{
    &:hover{
      border-color:$blue-med;
      background-color:$blue-med;
      color:$white;
    }
  }
  
  &.hover-blue-light{
    &:hover{
      border-color:$blue-light;
      background-color:$blue-light;
      color:$white;
    }
  }
  
  &.hover-yellow{
    &:hover{
      border-color:$yellow;
      background-color:$yellow;
      color:$blue-dark;
    }
  }
  
  &.hover-white,
  &.hover-blue-on-white{
    &:hover{
      background-color:$white;
      border-color:$white;
      color:$blue;
    }
  }

  &.hover-blue-dark-on-white{
    &:hover{
      background-color:$white;
      border-color:$white;
      color:$blue-dark;
    }
  }

  &.hover-red-on-white{
    &:hover{
      background-color:$white;
      border-color:$white;
      color:$red;
    }
  }
  
  // Outline
  
  &.outline{
    border-width:1px;
    background-color:transparent;
    color:$blue;
    border-color:#c1e7fc;
  }
  
  &.outline-blue-light{
    border-width:1px;
    background-color:transparent;
    color:$white;
    border-color:$blue-light;
  }
  
  // Buttons with icons
  &.has-icon-check{
    padding-left:35px;
    
    &:before{
      content:'';
      @extend .icon-check;
      background-color:$white;
      position:absolute;
      top:6px;
      left:12px;
    }
  }
  
}

.button-and-info{
  cursor:pointer;
  transition-duration:0.2s;
  transition-property:border color background;
  display:inline-block;
  text-decoration:none;
  font-size:13px;
  line-height:17px;
  margin-right:12px;
  
  &.yellow{
    .button-status{
      border-color:$yellow-dark;
      background-color:$yellow-dark;
    }
    
    .button-info{
      border-color:$yellow-dark;
      color:$yellow-dark;
    }
    
    &:hover{
      .button-status{
        border-color:$yellow;
        background-color:$yellow;
      }
    
      .button-info{
        border-color:$yellow;
        color:$yellow;
      }
    }
  }
  
  &.blue{
    &:hover{
      .button-status{
        border-color:$blue-light;
        background-color:$blue-light;
      }
      
      .button-info{
        border-color:$blue-light;
        color:$blue-light;
      }
    }
  }
  
  .button-status{
    transition-duration:0.2s;
    position:relative;
    z-index:1;
    vertical-align:middle;
    display:inline-block;
    border:1.5px solid $blue;
    color:$white;
    background-color:$blue;
    border-radius:30px;
    padding:7px 14px 7px 34px;
    
  
  }
    
  .button-info{
    position:relative;
    margin-left:-30px;
    display:inline-block;
    vertical-align:middle;
    border:1.5px solid $blue;
    background-color:$white;
    color:$blue;
    border-radius:0 30px 30px 0;
    padding:7px 14px 7px 34px;
    font-weight:600;
  }
  
}

@include breakpoint($laptop-tablet){
  .button{
    font-size:15px;
    line-height:19px;
    padding:10px 18px;
  }
}

@include breakpoint($tablet-portrait){
  .button{
    &.small{
      padding:6px 12px;
      font-size:13px;
      line-height:15px;
      
      &.has-icon-check{
        padding-left:32px;
        
        &:before{
          top:4px;
          left:10px;
          transform:scale(0.75);
        }
      }
    }
  }
}
@include breakpoint($tablet-portrait){
  .button-and-info{
    .button-status{
      padding:6px 12px 6px 30px;
      
      .icon-check{
        transform:scale(0.75);
      }
      
      .icon-check,
      .icon-retry{
        top:5px;
        left:8px;
      }
    }
    
    .button-info{
      padding:6px 12px 6px 34px;
    }
  }
}

@include breakpoint($phone){
  .button{
    font-size:13px;
    padding-top:11px;
    padding-bottom:11px;
    // line-height:19px;
    // padding:10px 18px;
  }
}
