@import "../border/config";
@import "../typography/config";

@input-font-size-base: @font-size-base;

@input-height-base: 40px;
@input-padding: @grid-gutter-width-half;

@input-color: @blue-darkest;
@input-background-color: @white;

@input-border-width: 1px;
@input-border-color: @border-color;
@input-border-radius: @border-radius-base;

@input-is-invalid-border-color: @orange;

@input-focus-border-color: @blue-dark;

@input-disabled-background-color: @gray-lighter;

#celery {
  .input-default() {
    border: @input-border-width solid @input-border-color;
    border-radius: @input-border-radius;
    font-size: @input-font-size-base;
    height: @input-height-base;
    padding-left: @input-padding;
    padding-right: @input-padding;
    color: @input-color;
    background-color: @input-background-color;
    transition: all @transition-base;

    &:focus {
      outline: none;
      border-color: @input-focus-border-color;
      transition: all @transition-base;
    }

    &[disabled],
    &[readonly] {
      background-color: @input-disabled-background-color;
    }

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