@import 'public-booking/main_dependencies';

@mixin panel-heading {
  margin: 0;
  height: $sub-heading-line-height + $sub-heading-padding;
  line-height: $sub-heading-line-height;
  padding-bottom: $sub-heading-padding;
  font-weight: $sub-heading-font-weight;
}

@mixin outline {
  outline: 2px $input-border-focus solid;
  outline-offset: 1px;
}

@mixin validation-box-vertical {
  display: flex;
  width: 50%;
  margin-left: 15px;
  color: $brand-danger;

  [ng-messages] {
    align-self: center;
  }
}

@mixin validation-box-horizontal {
  min-height: 20px;
  height: 20px;
  margin-top: 5px;
  color: $brand-danger;
}

@mixin form-control-normal {
  height: 46px;

  &[type="radio"] {
    height: 18px;
  }

  &[type="checkbox"] {
    height: 18px;
  }

  &[bb-datepicker-popup] {
    background-color: #ffffff;
  }

  &[readonly] {
    opacity: 0.8;
    background-color: $bb-input-background-color-readonly;
  }

  box-shadow: none;
  border-color: $bb-input-border-color;
  border-radius: $border-radius-base;

  transition: border-color $bb-input-border-transition-time;

  &:focus:not([readonly]) {
    box-shadow: none;
    border-color: $bb-input-border-focus;
  }
}

@mixin form-control-error {
  box-shadow: none;
  border: 1px solid $bb-input-border-error;
  &:focus:not([readonly]) {
    box-shadow: none;
    border-color: $bb-input-border-error;
  }
}

@mixin form-header {
  padding-bottom: $bb-panel-padding * 0.8;

  h1, h2, h3, h4, h5 {
    font-size: $bb-font-size-header-2;
    font-weight: $bb-font-weight-3;
  }
}

@mixin form-help-text {
  color: $bb-font-color;
}

@mixin form {
  .help-block {
    height: 20px;
    &.error {
      color: $brand-danger;
    }
  }

  label {
    font-size: 14px;
    font-weight: 400;

    // Special class for labels only. It adds * to label if it is marked as required.
    &.required {
      &:after {
        content: '*';
      }
    }
  }

  .checkbox {
    margin-top: 0;
    margin-bottom: 0;

    input[type=checkbox] {
      margin-top: 2px;
    }
  }

  textarea {
    // This code prevent text area to be infinitely resized and made ridiculously small.
    // Min height set as a doubleness of text field height.
    min-height: 92px; min-width: 100%; max-width: 100%; max-height: 100%;
  }

  .date-field[readonly] {
    background-color: white;
  }

  label {
    font-size: 14px;

    font-weight: 400;
    &.required {
      &:after {
        content: '*';
      }
    }
  }

  input, select, textarea {
    @include form-control-normal;
    &.form-control {
      @include form-control-normal;
    }
  }

  .has-error {
    input, select, textarea {
      @include form-control-error;
      &.form-control {
        @include form-control-error;
      }
    }
  }

  .bb-help-text {
    display: block;
    margin-bottom: 5px;
    font-weight: 300;
    &:before {
      margin-right: 5px;
      font-family: 'FontAwesome', sans-serif;
      content: "\f05a";
    }
  }

  .bb-check-space {
    [bb-question-label] {
      display: none;
    }
  }

  .required-fields {
    font-weight: 300;
    &:before {
      content: '*';
    }
  }

}