@if mgwt.css pretty {
	@external mgwt-Button, mgwt-Button-active, mgwt-Button-small;
	@external mgwt-Button-round, mgwt-Button-important;
	@external mgwt-Button-confirm, mgwt-Button-disabled;
}

.mgwt-Button {
  color: #454545;
  display: inline-block;
  position: relative;
  padding: 10px;
  margin: 5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 16px;
  background-color: #e5e9e8;
  border: 1px solid #9daca9;
  border-radius: 6px;
  text-align: center;
}

@if mgwt.formfactor desktop {
  .mgwt-Button {
    cursor: pointer;
  }
}

.mgwt-Button-small {
  padding: 7px;
  margin: 5px;
  font-size: 12px;
}

.mgwt-Button-active {
  background-color: #d4d9d7;
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.36);
}

.mgwt-Button-important {
  border: 1px solid #134f7e;
  background-color: #288ede;
  color: #fff;
  font-weight: 500;
}

.mgwt-Button-important.mgwt-Button-active {
  background-color: #1e7dc8;
  box-shadow: inset 0 1px rgba(0, 0, 0, 0.12);
}

.mgwt-Button-confirm {
  border: 1px solid #404E00;
  background-color: #739D01;
  color: #fff;
  font-weight: 500;
}

.mgwt-Button-confirm.mgwt-Button-active {
  background-color: #738d24;
  box-shadow: inset 0 1px rgba(0, 0, 0, 0.12);
  color: #fff;
}

.mgwt-Button-round {
  border-radius: 16px;
}

.mgwt-Button-disabled {
  opacity: 0.25;
}
