button,
.button {
	font-family: var(--text-font-family);
	font-size: var(--button-font-size);
	color: var(--color-button-primary-text);
	background-color: var(--color-button-primary);
	border-radius: var(--button-border-radius);
	min-height: var(--button-height);
	padding: var(--button-padding-tb) var(--button-padding-rl);
	font-weight: var(--button-font-weight);
	text-decoration: none;
	cursor: pointer;
	display: inline-block;
	line-height: var(--button-base-line);
	border: 1px solid transparent;
	vertical-align: middle;
	-webkit-appearance: none;
	& i {
    position: relative;
    top: 1px;
    margin: 0 2px;
	}
}
input[type="submit"] {
  width: auto;
}
button:hover,
.button:hover {
  outline: none;
	text-decoration: none;
	color: var(--color-button-primary-text);
	background-color: var(--color-button-primary-hover);
}

// Disabled
.button:disabled,
.button.disabled {
	cursor: default;
	font-style: normal;
	color: var(--color-button-primary-text-disabled);
	background-color: var(--color-button-primary-disabled);
}

// Size
.button.small {
  font-size: calc(var(--button-font-size-small));
  min-height: var(--button-height-small);
  padding: var(--button-padding-small-tb) var(--button-padding-small-rl);
  border-radius: var(--button-border-radius);
}
.button.big {
  font-size: calc(var(--button-font-size-big));
  min-height: var(--button-height-big);
  padding: var(--button-padding-big-tb) var(--button-padding-big-rl);
  border-radius: var(--button-border-radius);
}
.button.large {
  font-size: calc(var(--button-font-size-large));
  min-height: var(--button-height-large);
  padding: var(--button-padding-large-tb) var(--button-padding-large-rl);
  border-radius: var(--button-border-radius);
}

// Outline
.button.outline {
  background: none;
  border-width: 2px;
  border-color: var(--color-button-primary);
  color: var(--color-button-primary);
  &:hover {
    background: none;
    color: var(--color-button-primary-hover);
    border-color: var(--color-button-primary-hover);
  }
  &:disabled,
  &.disabled {
    background: none;
    color: var(--color-button-primary-text-disabled);
  	border-color: var(--color-button-primary-disabled);
  }
}

// White
.button.inverted {
	color: var(--color-button-secondary-text);
	background-color: var(--color-inverted);
  &:disabled,
  &.disabled {
    color: var(--color-button-secondary-text-disabled);
    background-color: var(--color-button-secondary-disabled);
  }
  &.outline {
    background: none;
    color: var(--color-inverted);
    border-color: var(--color-inverted);
    &:hover {
      color: var(--color-button-secondary-hover);
      border-color: var(--color-button-secondary-hover);
    }
    &:disabled,
    &.disabled {
      background: none;
	    color: var(--color-button-secondary-text-disabled);
	    border-color: var(--color-button-secondary-disabled);
    }
  }
  &:hover {
    opacity: .7;
  }
}

// Round
.button.round {
  border-radius: var(--button-height-large);
}

// Raised
.button.raised {
  box-shadow: 0 1px 3px rgba(0, 0, 0, .3);
}

// Upper
.button.upper {
  text-transform: uppercase;
  letter-spacing: .04em;
  font-size: calc(var(--button-font-size-small));
  &.small {
    font-size: calc(var(--button-font-size-smaller));
  }
  &.big {
    font-size: calc(var(--button-font-size-small));
  }
  &.large {
    font-size: var(--button-font-size);
  }
}

// Secondary
.button.secondary {
	color: var(--color-button-secondary-text);
	background-color: var(--color-button-secondary);
	&:hover {
    color: var(--color-button-secondary-text);
    background-color: var(--color-button-secondary-hover);
	}
  &:disabled,
  &.disabled {
    color: var(--color-button-secondary-text-disabled);
    background-color: var(--color-button-secondary-disabled);
  }
  &.outline {
    background: none;
    color: var(--color-button-secondary);
    border-color: var(--color-button-secondary);
    &:hover {
      color: var(--color-button-secondary-hover);
      border-color: var(--color-button-secondary-hover);
    }
    &:disabled,
    &.disabled {
      background: none;
	    color: var(--color-button-secondary-text-disabled);
	    border-color: var(--color-button-secondary-disabled);
    }
  }
}