[Angular] Separating Structural Styles From Theme Styles - Making Components Themeable

@import "common.css";
@import "au-fa-input-default-theme.css";

:host {
  border-color: lightgrey;
}

:host(.input-focus) {
  border-color: #4D90FE;
  -webkit-box-shadow: 0 0 5px  #4D90FE;
  box-shadow: 0 0 5px  #4D90FE;
}

/*Common for all input fields*/
.icon {
  width:20px;
  text-align: center;
  padding-left: 5px;
  padding-right: 2px;
  border:none;
  vertical-align: middle;
}

:host {
  border-width:1px;
  border-style: solid;
  padding: 1px 0;
  display: inline-block;
}

:host(.input-focus) {
  outline: none;
}

:host /deep/ input {
  border:none ;
  outline: none;
  height: 100%;
  box-sizing: border-box;
}