@import '../constants/dimensions';
@import '../constants/colors';

.form-control {
  outline: none;
  border: 0;
  height: @line-height-md;

  textarea,
  input {
    width: 100%;
    height: 100%;
  }

  input:invalid {
    border: 1px solid @warning !important;
  }

  &.form-control--outlined,
  &.form-control--underlined {
    height: auto;
    margin: @padding-sm;

    textarea,
    input {
      border: 1px solid @hl-md;
      padding: @padding-sm;
      border-radius: @radius-md;
    }

    textarea,
    input:focus {
      border-color: @hl-xl;
    }
  }

  &.form-control--underlined {
    textarea,
    input {
      border-radius: 0;
      border-top: 0;
      border-right: 0;
      border-left: 0;
    }
  }
}

// Push form all the way to the sides if inside label
label > .form-control,
.form-control--wide {
  margin-left: 0 !important;
  margin-right: 0 !important;
}

.btn {
  text-align: center;
  padding: 0 (@padding-md * 1.5);
  height: @line-height-md;
  border: 1px solid transparent;

  &.btn--compact {
    padding: 0 @padding-md;
    height: @line-height-sm;
  }

  &.btn--super-compact {
    padding: 0 @padding-md;
    height: @line-height-xs;
  }

  &.btn--super-duper-compact {
    padding: 0 @padding-sm;
    height: @line-height-xxs;
  }

  &.btn--outlined {
    border: 1px solid @hl-lg;
    border-radius: @radius-md;
  }
}

button:disabled {
  opacity: 0.4;
}

button:focus:not(:disabled),
button.focus:not(:disabled),
button:hover:not(:disabled) {
  background: @hl-xs;
}

button:active:not(:disabled) {
  background: @hl-md;
}

textarea, input, button {
  box-sizing: border-box;
  text-align: left;
  font-size: inherit;
  text-decoration: inherit;
  background: none;
  border: 0;
  outline: 0;
  margin: 0;
  padding: 0;
  color: inherit;

  &::-webkit-input-placeholder {
    color: @hl-xl;
  }
}

input.input--error {
  border-color: @danger !important;
}

button {
  width: auto;
  padding: 0;
  margin: 0;
}

textarea.no-resize {
  resize: none;
}