.border() {
  font-size: 14px;
  outline: 0;
  padding: 4px 6px;
  border-radius: 4px;
  border: solid 1px #ccc;
  transition: border linear 0.2s, box-shadow linear 0.2s;
}

.border_focus() {
  border-color: rgba(82, 168, 236, 0.8);
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);
}

html /deep/ ul {
  margin: 0;
  padding: 0;
}

html /deep/ select {
  .border();
  width: 220px;
  height: 30px;
  background-color: #fff;
  cursor: pointer;
  display: inline-block;

  &:focus {
    .border_focus();
  }
}

html /deep/ input {
  &[type='text'] {
    .border();
    height: 20px;
    line-height: 20px;

    &:focus {
      .border_focus();
    }
  }
}

html /deep/ textarea {
  .border();

  &:focus {
    .border_focus();
  }
}

html /deep/ table {
  width: 100%;
  background: #fff;
  border-spacing: 0;

  thead tr {
    background: #FAFAFA;
    color: #999;
  }

  @borderColor: #e4e4e4;
  &.bordered {
    border-top: solid 1px @borderColor;
    border-left: solid 1px @borderColor;

    td, th {
      border-bottom: solid 1px @borderColor;
      border-right: solid 1px @borderColor;
    }
  }

  &.line {
    td, th {
      border-bottom: solid 1px @borderColor;
    }
  }

  &.hover {
    tbody tr:hover {
      background: #f5f5f5;
    }
  }
}

html /deep/ label {
  display: inline-block;
}

html /deep/ .text-center {
  text-align: center !important;
}

html /deep/ .text-left {
  text-align: left !important;
}

html /deep/ .text-right {
  text-align: right !important;
}

html /deep/ .pull-left {
  float: left;
}

html /deep/ .pull-right {
  float: right;
}

html /deep/ .clearfix {
  &:before, &:after {
    display: block;
    content: '';
    clear: both;
  }
}

html /deep/ paper-button {
  vertical-align: middle;

  &.small::shadow .button-content {
    padding: 4px 6px;
  }

  &.primary {
    background: #4285f4;
    color: #fff;
  }

  &.inverse {
    background: #666;
    color: #fff;
  }

  &.success {
    background: #6C9;
    color: #fff;
  }
}