aidamanna/appetype

.at-btn-dark {
  text-transform: uppercase;
  width: 85px;
  background-color: var(--at-green);
  border: 1px solid var(--at-green);
  color: white;
  margin-left: 5px;
}

.at-btn-dark:hover {
  color: white;
  background-color: var(--at-light-green);
  border: 1px solid var(--at-light-green);
  box-shadow: none;
}

.at-btn-dark:focus,
.at-btn-dark:active:focus {
  color: white;
  background-color: var(--at-dark-green);
  border: 1px solid var(--at-dark-green);
}

.at-btn-xs-light {
  text-transform: uppercase;
  width: 60px;
  background: transparent;
  border: 1px solid var(--at-green);
  color: var(--at-green);
  margin-right: 5px;
}

.at-btn-xs-light:hover {
  color: var(--at-green);
  background: transparent;
  border: 1px solid var(--at-green);
  box-shadow: 0 1px 3px 1px var(--at-shadow-grey);
}

.at-btn-xs-light:focus,
.at-btn-xs-light:active:focus {
  color: var(--at-green);
  background: transparent;
  border: 1px solid var(--at-green);
  box-shadow: 0 1px 3px 1px var(--at-dark-shadow-grey);
}

.at-btn-xs-dark {
  text-transform: uppercase;
  width: 60px;
  background-color: var(--at-green);
  border: 1px solid var(--at-green);
  color: white;
  margin-right: 5px;
}

.at-btn-xs-dark:hover {
  color: white;
  background-color: var(--at-green);
  border: 1px solid var(--at-green);
  box-shadow: 0 1px 3px 1px var(--at-shadow-grey);
}

.at-btn-xs-dark:focus,
.at-btn-xs-dark:active:focus {
  color: white;
  background-color: var(--at-green);
  border: 1px solid var(--at-green);
  box-shadow: 0 1px 3px 1px var(--at-dark-shadow-grey);
}

input[type="submit"].btn-block {
  width: 100%;
  margin: 0;
}