.button {
  font-size: $small;
  font-family: $sans;
  color: $white;
  background-color: $default;
  padding: 10px 30px;
  text-align: center;
  border-radius: 3px;
  border: none;

  &:hover {
    background-color: $dark-hover;
    color: $white;
    text-decoration: none;
  }

  &:focus {
    text-decoration: none;
    color: $default;
  }
}

.button--small {
  @extend .button;
  padding: 5px 15px;
  font-size: $xs;
}

.button-light {
  @extend .button--small;
  background-color: $white;
  color: $default;
  border: 1px solid $secondary;

  &:hover {
    background-color: $secondary;
    color: $white;
  }
}

.keep-writing {
  @extend .button;
  margin-top: 1%;
}

.confirmed-save {
  border: 1px solid $success;
  background-color: $success;
  color: $white;

  &:hover, &:active, &:focus {
    background-color: $success;
    color: $white;
  }
}


.button {
  font-size: $small;
  font-family: $sans;
  color: $white;
  background-color: $default;
  padding: 10px 30px;
  text-align: center;
  border-radius: 3px;
  border: none;

  &:hover {
    background-color: $dark-hover;
    color: $white;
    text-decoration: none;
  }

  &:focus {
    text-decoration: none;
    color: $default;
  }

  &:active, &:focus {
    color: $white;
    outline: none;
  }
}

.button--small {
  @extend .button;
  padding: 5px 15px;
  font-size: $xs;
}

.button-light {
  @extend .button--small;
  background-color: $white;
  color: $default;
  border: 1px solid $secondary;

  &:hover {
    background-color: $secondary;
    color: $white;
  }

  &:active, &:focus {
    color: $default;
    outline: none;
  }
}

.keep-writing {
  @extend .button;
  margin-top: 1%;
}

.confirmed-save {
  border: 1px solid $success;
  background-color: $success;
  color: $white;

  &:hover, &:active, &:focus {
    background-color: $success;
    color: $white;
  }
}


Fix button color on focus.
Fix button color on focus.
