WebCompDev / COMPONENTS

:host {
  display: inline-block;
  position: relative;
  box-sizing: border-box;
  margin: 0 0.29em;
  background: transparent;
  text-align: center;
  font: inherit;
  outline: none;
  border-radius: 3px;
  -webkit-user-select: none;
  user-select: none;
  cursor: pointer;
  z-index: 0;
}

:host([disabled]) {
  cursor: auto;
  pointer-events: none;
}

:host([disabled]) #button {
  background: #eaeaea;
  color: #a8a8a8;
}

#button {
  position: relative;
  outline: none;
  font-size: 14px;
  font-weight: 400;
  font-family: 'RobotoDraft','Roboto',arial,sans-serif;
  white-space: nowrap;
  border-radius: inherit;
}

iron-icon {
  width: 22px;
  height: 22px;
  margin: 6px;
}

.icon {
  display: inline-block;
  vertical-align: middle;
}

#shadow {
  border-radius: inherit;
}

#ripple {
  pointer-events: none;
}

.button-content {
  outline: none;
}

.buttonText {
  display: inline-block;
  vertical-align: middle;
  padding-right: .8em;
}

/*
 * Dark Theme
 */
.theme-dark {
  background: #da4336;
  color: #ffffff;
  border: 1px solid transparent;
}

.theme-dark.signedIn-true.additionalAuth-false {
  background: #999;
  border: 1px solid #888;
}

.theme-dark.signedIn-true.additionalAuth-false:hover,
.theme-dark.signedIn-true.additionalAuth-false:focus {
  background: #aaa;
}

:host([noink]) .theme-dark:hover,
:host([noink]) .theme-dark:focus {
  background: #e74b37;
}

:host([noink]) .theme-dark.signedIn-true.additionalAuth-false:hover,
:host([noink]) .theme-dark.signedIn-true.additionalAuth-false:focus {
  background: #aaa;
}

/*
 * Light Theme
 */
.theme-light {
  background: #fff;
  color: #737373;
  border: 1px solid #d9d9d9;
}

.theme-light.signedIn-true.additionalAuth-false {
  background: #c0c0c0;
  color: #fff;
  border: #888 1px solid;
}

.theme-light.signedIn-true.additionalAuth-false:hover,
.theme-light.signedIn-true.additionalAuth-false:focus {
  background: #aaa;
}

:host([noink]) .theme-light .button-content:hover,
:host([noink]) .theme-light:focus {
  border: 1px solid #c0c0c0;
}

:host([noink]) .theme-light.signedIn-true.additionalAuth-false:hover,
:host([noink]) .theme-light.signedIn-true.additionalAuth-false:focus {
  background: #aaa;
}

/*
 * Icon Only Width
 */
.width-iconOnly .buttonText {
  display: none;
}

/*
 * Tall Height
 */
.height-tall .buttonText {
  font-size: 15px;
  font-weight: 700;
}

.height-tall iron-icon {
  width: 30px;
  height: 30px;
  margin: 8px;
}

/*
 * Short Height
 */
.height-short .buttonText {
  font-size: 11px;
}

.height-short iron-icon {
  width: 16px;
  height: 16px;
  margin: 3px;
}


/*
 * Branding
 */

/* Google Scopes */

/* Dark Theme */
.brand-google.theme-dark {
  background: #4184F3;
  color: #fff;
  border: 1px solid #3266d5;
}

.brand-google.theme-dark #ripple {
  color: #1b39a8;
}

:host([noink]) .brand-google.theme-dark:hover,
:host([noink]) .brand-google.theme-dark:focus {
  background: #e74b37;
}

.brand-google.theme-light .icon {
  color: #4184F3;
}

.brand-google.theme-light.signedIn-true.additionalAuth-false .icon {
  color: #fff;
}

.brand-google.theme-light #ripple {
  color: #444;
}

:host([noink]) .brand-google.theme-light:hover,
:host([noink]) .brand-google.theme-light:focus {
  border: 1px solid #c0c0c0;
}

.brand-google-plus.theme-dark {
  background: #da4336;
  color: #fff;
  border: 1px solid transparent;
}

.brand-google-plus.theme-dark #ripple {
  color: #c43828;
}

/* Light Theme */
.brand-google-plus.theme-light {
  background: #fff;
  color: #737373;
  border: 1px solid #d9d9d9;
}

.brand-google-plus.theme-light .icon {
  color: #e74b37;
}

.brand-google-plus.theme-light.signedIn-true.additionalAuth-false .icon {
  color: #fff;
}

.brand-google-plus.theme-light #ripple {
  color: #400;
}

:host([noink]) .brand-google-plus.theme-light:hover,
:host([noink]) .brand-google-plus.theme-light:focus {
  border: 1px solid #c0c0c0;
}