arranbartish/angular-cli-widgets

:host{
  display: block;
  margin-bottom: 10px;
}

.tek-btn{
  width: 100%;
  border: none;
  text-align: center;
  text-decoration: none;
  font-size: 16px;
  height: 40px;
  &:focus{
    outline: none;
  }
}

.tek-btn[btn-type="primary"]{
  color: white;
  background-color: #ff6600;
  &:disabled{
    background-color: #999966;
  }
  &:not([disabled]){
    &:hover{
      background-color: #cc3300;
    }
  }
}

.tek-btn[btn-type="secondary"]{
  background-color: #ffffff;
  color:#ff6600;
  border: 1px solid #ff6600;
  &:disabled{
    background-color: #ffffff;
    color:#999966;
    border: 1px solid #999966;
  }
  &:not([disabled]){
    &:hover{
      background-color: #cc3300;
      border: 1px solid #cc3300;
      color: white;
    }
  }
}

.tek-btn[btn-state="hovered"]{
  &.tek-btn[btn-type="secondary"]{
    color: white;
  }
  background-color: #cc3300;
}