@import (reference) "colors";
@import (reference) "fonts";
@import (reference) "buttons";
@import (reference) "inputs";

.form {
  width: 100%;
  padding: 20px;
  display: flex;
  flex-direction: column;
  border-radius: 3px;
  box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.15);
  box-sizing: border-box;

  &__title:extend(.header) {
    margin: 0px;
  }

  &__sub-title:extend(.header--small) {
    margin: 0;
  }

  &__label:extend(.label) {
    margin-top: 15px;
    margin-left: 1rem;
  }

  &__input {
    .input;
    &--invalid {
      .input;
      border-color: @color--red;
    }
  }

  &__button-group {
    display: flex;
    width: 100%;
    justify-content: flex-end;
  }

  &__button:extend(.button),
  &__button--cancel:extend(.button--gray) {
    width: 100px;
    align-self: flex-end;
    margin-top: 20px;
  }
}