form .widget:not(:last-child) {
  margin-bottom: 2rem;
}

input:not([type="checkbox"]):not([type="radio"]),
textarea {
  width: 100%;
  font-size: 1.44rem;
  font-family: inherit;
  font-weight: 400;
  font-style: normal;
  padding: 1.2rem;
  border: 0.1rem solid $ls-color-dark-grey;
}

input.text,
select,
textarea {
  padding:1.2rem;
}

input[type="number"] {
  padding-left: 2rem;
  text-align: center;
}

.submit, .button, button {
  &:not(.no-button) {
    @include ls_defaultButton;
    @include ls_dynamicBackground;
    //margin-top: $grid-gutter-width-super-small;
  }
}

.no-button {
  background: none;
  border: none;
  padding: 0;
}

.ce_form .widget {
  margin-bottom: 1rem;
  &.widget-explanation.explanation {
    margin-top: 2rem;
  }
}

.widget.widget-text,
.widget.widget-password,
.widget.widget-textarea,
.widget.widget-select {
  display: flex;

  @include media-breakpoint-down(5,$grid-breakpoints-ls) {
    flex-direction: column;

    label {
      width: 100%;
    }
  }

  label {
    width: 33.3%;
    min-width: 10rem;
    max-width: 30rem;
    margin-right: 1rem;
    overflow: hidden;
    text-overflow: ellipsis;
  }

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

select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-color: $ls-color-white;
  border: 0.1rem solid $ls-color-dark-grey;
  border-radius: 0;
  cursor: pointer;
  color: $ls-color-black;
  padding-right: 3.4rem;
}

form {
  .sorting-field {
    > div {
      position: relative;
      display: flex;

      &::after {
        @extend .fa;
        content: fa-content($fa-var-chevron-down);
        position: absolute;
        right: 1.2rem;
        display: flex;
        align-items: center;
        align-self: center;
        height: 100%;
        color: $ls-color-black;
        pointer-events: none;
      }
    }
  }

  .widget-select {
    position: relative;
    display: flex;

    &::after {
      @extend .fa;
      content: fa-content($fa-var-chevron-down);
      position: absolute;
      right: 1.2rem;
      display: flex;
      align-items: center;
      align-self: center;
      height: 100%;
      color: $ls-color-black;
      pointer-events: none;

      @include media-breakpoint-down(5,$grid-breakpoints-ls) {
        bottom: 1.4rem;
        align-items: end;
      }
    }
  }
}