.btn {
  min-width: 120px;
  height: 35px;
  border-radius: 3px;
  font-size: 13px;
  font-weight: bold;
  font-stretch: normal;
  font-style: normal;
  font-family: inherit;
  line-height: normal;
  letter-spacing: normal;
  text-align: center;
  padding-left: 15px;
  padding-right: 15px;

  &:focus {
    box-shadow: var(--focus-shadow);
    border: solid 1px var(--color-blue-205-100-50);
    outline: none;
  }

  [class^="app-icon-"]:before,
  [class*=" app-icon-"]:before {
    color: var(--color-grey-225-10-35);
  }
}

.btn-primary {
  color: var(--color-white);
  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.2);
  border: solid 1px var(--color-blue-205-100-45);
  background-color: var(--color-blue-205-100-50);

  &:hover {
    border: solid 1px var(--color-blue-205-100-50);
    background-color: var(--color-blue-205-100-45);
  }

  &:active {
    border: solid 1px var(--color-blue-205-100-45);
    background-color: var(--color-blue-205-100-50);
  }

  &:disabled {
    box-shadow: none;
    border: none;
    background-color: var(--color-grey-225-10-75);
    color: var(--color-grey-225-10-15);
  }
}

.btn-secondary {
  color: var(--color-grey-225-10-15);
  box-shadow: 0 2px 2px 0 var(--color-black-opacity-10);
  border: solid 1px var(--color-grey-225-10-75);
  background-color: var(--color-grey-225-10-95);

  &:hover {
    background-color: var(--color-grey-225-10-90);
  }

  &:active {
    background-color: var(--color-grey-225-10-75);
  }

  &:disabled {
    box-shadow: none;
    border: solid 1px var(--color-grey-225-10-75);
    background-color: var(--color-grey-225-10-95);
    color: var(--color-grey-225-10-75);
  }

}

.btn + .btn {
  margin-left: 15px;
}
