.form-field {
  margin: 0.25rem 0 0.5rem 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  position: relative;

  label {
    display: block;
    font-weight: 500;
    margin-bottom: 0.5rem;
    word-break: normal;
  }

  &.form-inline {
    flex-direction: row;
    align-items: center;

    label {
      margin-right: 0.5rem;
      margin-bottom: 0;
    }
  }
}

.form-control {
  position: relative;
  display: inline-flex;
  border: var(getCssVar(form-control-border));
  padding: 0.5rem 0.75rem;
  transition: border 0.2s ease, box-shadow 0.3s ease;
  height: 2.5rem;
  width: 100%;
  appearance: none;
  line-height: 1.3;
  color: inherit;
  background-color: inherit;

  &:focus {
    outline: 0;
    border-color: transparent !important;
    box-shadow: #{map-get($shadows, '1')};
  }

  &[disabled],
  &[readonly] {
    background-color: var(getCssVar(form-disabled-bg-color)) !important;
    color: var(getCssVar(form-disabled-color)) !important;
    border-color: var(getCssVar(form-disabled-bg-color));
  }
}

.form-group {
  display: flex;
  flex-wrap: wrap;

  .form-group-item {
    display: flex;
    align-items: center;
    padding: 0.5rem 0.75rem;
  }

  .form-control {
    width: auto;
    min-width: 0;
    flex: 1 1 auto;
  }

  .form-group-item,
  .form-control {
    &:first-child {
      border-bottom-left-radius: inherit;
      border-top-left-radius: inherit;
    }

    &:last-child {
      border-top-right-radius: inherit;
      border-bottom-right-radius: inherit;
    }
  }
}

// Material Style
.form-material {
  &:not(.form-material-bordered) .form-field:not(.form-default) .form-control {
    border-radius: 0;
  }

  .form-field:not(.form-default) {
    padding-top: 0.75rem;
    align-self: start;

    label {
      font-weight: 400;
      margin: 0;
      position: absolute;
      top: 1.4rem;
      left: 0;
      pointer-events: none;
      transition-property: top, color, font-size;
      transition-timing-function: ease;
      transition-duration: var(getCssVar(form-material-transition-duration));
      font-size: 1rem;
      z-index: 2;
      color: var(getCssVar(form-material-label-color));
    }

    .form-control {
      border: none;
      border-bottom: var(getCssVar(form-material-border)) !important;
      padding: 0;
      background-color: transparent;

      &:focus {
        box-shadow: none;
      }

      &[disabled],
      &[readonly] {
        background: transparent !important;
        color: var(getCssVar(form-disabled-color)) !important;
        border-bottom: var(getCssVar(form-material-disabled-border)) !important;

        + label {
          color: var(getCssVar(form-disabled-color));
        }
      }
    }

    &::after {
      content: '';
      position: absolute;
      top: var(getCssVar(form-material-position));
      left: var(getCssVar(form-material-left-offset));
      width: 0;
      border-bottom: var(getCssVar(form-material-active-border-width))
        var(getCssVar(form-material-active-border-style)) var(getCssVar(form-material-color));
      transition: width var(getCssVar(form-material-transition-duration)) ease;
      z-index: var(getCssVar(form-material-after-z-index));
    }

    &.form-rtl::after {
      left: unset;
      right: var(--form-material-right-offset);
    }

    &.active {
      label {
        top: 0.1rem;
        font-size: 0.8rem;
      }

      &.is-focused {
        label {
          color: var(getCssVar(form-material-color));
        }

        &::after {
          width: var(getCssVar(form-material-width));
        }
      }

      .form-control {
        &[disabled] + label,
        &[readonly] + label {
          color: var(getCssVar(form-disabled-color));
        }
      }
    }
  }

  &.form-material-bordered .form-field:not(.form-default) {
    &.is-focused label,
    &.active label {
      margin-top: 0.15rem;
    }

    &.is-focused .form-control {
      border-color: var(getCssVar(form-material-color)) !important;
    }

    label:not(.form-check) {
      transition-property: top, color, font-size, margin-top;
      padding: 0 0.25rem;
      margin-left: 0.5rem;
    }

    .form-control {
      border: var(getCssVar(form-material-border)) !important;
      padding-left: 0.75rem;

      &[disabled],
      &[readonly] {
        border: var(getCssVar(form-material-disabled-border)) !important;
      }
    }

    &::after {
      content: none;
    }
  }
}