[dir="rtl"] {
  text-align: right;
}

[dir="ltr"] {
  text-align: left;
}

::placeholder {
  color: $bz-neutral-500;
}

select::-ms-expand {
  display: none;
}

.bz-form-group {
  margin-bottom: $bz-space-stack-m;
}

.bz-form-label {
  color: $bz-neutral-600;
  flex: 1 1 auto;
  font-size: $bz-font-size-body;
  font-weight: $bz-font-weight-semibold;
  line-height: 1.5em;
  margin-bottom: $bz-space-stack-xs;
  width: 50%;

  &--compact {
    font-size: $bz-font-size-body-small;
  }

  &--full {
    width: 100%;
  }

  &--hidden {
    display: none;
  }
}

.bz-control {
  max-width: 100%;
  position: relative;
  width: 100%;
}

.bz-form-item__info {
  display: flex;
  flex-direction: column;
}

.bz-form-item {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  max-width: 100%;
  padding: $bz-space-inset-squish-s;
  width: 100%;

  &__control {
    flex: 1 1 auto;
    max-width: 100%;
    width: 50%;

    &--full {
      width: 100%;
    }

    &--hidden {
      display: none;
    }
  }

  &--error {
    .bz-input,
    .bz-input-icon {
      border-color: $bz-color-state-error;
    }

    .bz-container-message,
    .bz-form-message,
    .bz-form-cell-message {
      &__help {
        display: none;
      }

      &__error {
        display: flex;
      }
    }

    .bz-required__icon {
      color: $bz-color-state-error;
    }
  }

  &--display-vertical,
  &--display-value {
    flex-direction: column;

    .bz-form-item__control {
      max-width: 100%;
      width: 100%;
    }

    .bz-form-label {
      max-width: 100%;
      width: 100%;
    }
  }

  &--display-normal,
  &--display-normal[dir="ltr"] {
    .bz-form-label {
      padding-right: $bz-space-stack-s;
    }
  }

  &--display-reversed {
    flex-direction: row-reverse;
  }

  &--display-reversed,
  &--display-reversed[dir="ltr"] {
    .bz-form-label {
      padding-left: $bz-space-stack-s;
    }
  }

  &--display-label {
    .bz-form-item__control {
      flex: 0 0 auto;
    }

    .bz-control {
      display: none;
    }

    .bz-form-label {
      flex: auto;
      width: 100%;
    }
  }

  .bz-required__icon {
    display: none;
  }

  &--display-value {
    label.bz-form-label label {
      display: none;
    }
  }

  &--display-value.bz-form-item--required {
    .bz-required__icon {
      display: inline-block;
    }
  }

  &--required .bz-required__icon {
    display: inline;
  }
}

[dir="rtl"] .bz-form-item {
  &--display-normal {
    .bz-form-label {
      padding-left: $bz-space-stack-s;
      padding-right: 0;
    }
  }

  &--display-reversed {
    .bz-form-label {
      padding-left: 0;
      padding-right: $bz-space-stack-s;
    }
  }
}

.bz-form-item {
  &--display-normal[dir="rtl"] {
    .bz-form-label {
      padding-left: $bz-space-stack-s;
      padding-right: 0;
    }
  }

  &--display-reversed[dir="rtl"] {
    .bz-form-label {
      padding-left: 0;
      padding-right: $bz-space-stack-s;
    }
  }
}

.bz-form-container {
  position: relative;
}

input {
  @keyframes cdk-text-field-autofill-color {
    to {
      background: $bz-theme-100;
      color: $bz-neutral-600;
    }
  }

  &:-webkit-autofill {
    animation-name: cdk-text-field-autofill-color;
    animation-fill-mode: both;
  }

  &::-ms-clear {
    display: none;
  }
}

.bz-input,
.bz-input-icon,
.bz-input-container,
.bz-input-button {
  appearance: none;
  background: $bz-neutral-100;
  border: 1px solid $bz-neutral-300;
  border-radius: $bz-border-radius-m;
  color: $bz-neutral-600;
  font-size: $bz-font-size-body;
  line-height: 1.5;
  padding: $bz-space-inset-squish-s;
  text-align: inherit;
  width: 100%;
  resize: vertical;
  -moz-appearance: textfield;

  &::placeholder {
    color: $bz-neutral-500;
    font-size: $bz-font-size-body;
  }

  &--disabled,
  &[disabled] {
    background-color: $bz-neutral-200;
  }

  &--readonly,
  &[readonly] {
    background: transparent;
    border: 0;
    margin-bottom: $bz-space-stack-xs;
    overflow: hidden;
    padding: 0;

    &::placeholder {
      color: $bz-neutral-600;
    }
  }

  &:focus,
  &--active {
    border-color: $bz-theme-400;
    outline: none;
    box-shadow: none;

    .bz-form-item--error & {
      border-color: $bz-color-state-error;
    }
  }

  &--error {
    border-color: $bz-color-state-error;

    &:focus {
      border-color: $bz-color-state-error;
    }

    + .bz-status > .bz-status__message {
      color: $bz-color-state-error;
    }
  }

  &[type="number"]::-webkit-inner-spin-button,
  &[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
  }

  &--compact {
    font-size: $bz-font-size-body-small;
    padding: $bz-space-inset-squish-xs;

    &::placeholder {
      font-size: $bz-font-size-body-small;
      padding: $bz-space-inset-squish-xs;
    }
  }
}

.bz-input-icon {
  align-items: center;
  display: flex;
  padding: 0;

  &__input {
    background: transparent;
    border: 0;
    flex: 1;
    min-width: 0;
    padding: $bz-space-inset-squish-s;
    text-align: inherit;
  }

  > .bz-icn {
    padding: $bz-space-inset-s;
  }

  &:focus {
    border-color: $bz-theme-400;
    box-shadow: none;
    outline: 0;
  }

  &--disabled,
  &--readonly {
    background-color: $bz-neutral-200;

    + .bz-icn {
      display: block;
    }
  }
  &--focused {
    border-color: $bz-theme-400;
    outline: none;
  }
}

.bz-textarea-readonly {
  overflow: hidden;
  transition: all 1s;

  .bz-morecontent {
    span {
      display: none;
    }
  }

  &--active {
    .bz-morecontent {
      span {
        display: inline;
      }
    }
  }
}

.bz-text-readonly {
  overflow: hidden;
  transition: all 1s;

  .bz-morecontent {
    span {
      display: none;
    }
  }

  &--active {
    .bz-morecontent {
      span {
        display: inline;
      }
    }
  }
}

.bz-read-more {
  color: $bz-neutral-500;
}

.bz-container-message,
.bz-form-message,
.bz-form-cell-message {
  display: flex;
  font-size: $bz-font-size-body-small;
  margin-top: $bz-space-stack-xs;

  &__text {
    line-height: 1.5em;
    width: 100%;
  }

  &__help {
    color: $bz-neutral-500;
    font-size: $bz-font-size-body-small;
    line-height: 1.5em;
    overflow: hidden;
  }

  &__char-counter {
    color: $bz-neutral-500;
    font-size: $bz-font-size-body-small;
    line-height: 1.5em;
    overflow: hidden;

    &--error {
      color: $bz-color-state-error;
      font-weight: $bz-font-weight-semibold;
    }
  }

  &__spacer {
    flex: 1 0 1em;
  }

  &__error {
    color: $bz-color-state-error;
    display: none;
    overflow: hidden;

    .bz-icn {
      fill: $bz-color-state-error;
    }

    span {
      width: 100%;
    }
  }
}

.bz-form-item-grid--error .bz-form-message__error {
  display: flex;
}

.bz-dropdown {
  display: inline-block;
  position: relative;
  vertical-align: middle;

  &::after {
    content: "";
    pointer-events: none;
    position: absolute;
  }
}

// Custom dropdown arrow
.bz-dropdown::after {
  content: "\25BC";
  font-size: 0.625em;
  height: 1em;
  line-height: 1;
  margin-top: -0.5em;
  right: 1.2em;
  top: 50%;
}

.bz-dropdown__select {
  -moz-appearance: none;
  -webkit-appearance: none;
  appearance: none;
  background-color: $bz-neutral-100;
  border: 1px solid $bz-neutral-300;
  border-radius: $bz-border-radius-l;
  padding: $bz-space-inset-squish-s;
}

.bz-dropdown__select[disabled] {
  color: rgba(0, 0, 0, 0.3);
}

.bz-dropdown__select::after {
  color: rgba(0, 0, 0, 0.1);
}

textarea {
  &.bz-input {
    &--compact {
      &::placeholder {
        line-height: .9rem;
        text-indent: -.6rem;
      }
    }
  }
}

/*
  ##Device = Most of the Smartphones Mobiles (Portrait)
  ##Screen = B/w 320px to 479px
*/

[dir="rtl"] {
  .bz-input-icon,
  .bz-file-upload__container,
  .bz-document-template__container {
    > .bz-icn {
      left: $bz-space-inset-xs;
      right: auto;
    }
  }
}

@media (max-width: 480px) {
  .bz-form-label {
    max-width: 100%;
    width: 100%;
  }

  .bz-form-item {
    flex-direction: column;

    &__control {
      max-width: 100%;
      width: 100%;
    }

    &--display-normal {
      .bz-form-label {
        padding: 0;
      }
    }

    &--display-reversed {
      flex-direction: column-reverse;

      .bz-form-label {
        margin-bottom: 0;
        margin-top: $bz-space-stack-xs;
        padding: 0;
      }
    }
  }

  .bz-form-item {
    &--display-normal[dir="rtl"] {
      .bz-form-label {
        padding: 0;
      }
    }

    &--display-reversed[dir="rtl"] {
      .bz-form-label {
        padding: 0;
      }
    }
  }

  [dir="rtl"] .bz-form-item {
    &--display-normal {
      .bz-form-label {
        padding: 0;
      }
    }

    &--display-reversed {
      .bz-form-label {
        padding: 0;
      }
    }
  }
}