legend {
    border-bottom: 0;
    margin-bottom: 0;
}

input + label {
    font-weight: $font-weight-normal;
}

button {
  &:focus {
    outline: medium solid $input-focus-border-color;
  }
}

.form-control {
    display: inline-block;
  &:focus {
    outline: medium solid $input-focus-border-color;
  }
}

.form-text {
    display: block;
}

input[type=text],
input[type=password],
textarea,
select {
    @extend .form-control;
    .modal &,
    .singular & {
        width: auto !important;
        max-width: 100%;
    }
}

span.togglePassword {
    margin-left: -30px;
    cursor: pointer;
    font-size: 0.85rem;
    font-weight: normal;
}

.password-progress {
    margin-top: 0.5rem; // 8px;
    margin-bottom: 0;
    padding: 0 !important;

    .step2 & {
        width: 100% !important;
    }
}
.password span.help {
    padding-left: 1.25rem !important;
}

label,
.pseudolabel {
    max-width: 100%;
    padding-right: $spacing-base;
    font-weight: $font-weight-normal;
    line-height: $line-height-base;
    margin-bottom: 0;

    .form-condensed & {
        min-width: 6.25rem; //100px;
        &.pseudolabel {
            min-width: 16.5625rem; // 265px;
        }
    }
    &.input-inline {
        display: inline;
    }
    &.visually-hidden {
        min-width: 0;
        width:0;
    }
    .topic & {
        font-weight: $font-weight-light;
    }
    .form-inline & {
        min-width: 0;
    }
    &.btn,
    .col-md-2 {
        min-width: 0;
    }

    .column-layout &,
    .column &{
        min-width: 0;
    }

    @include media-breakpoint-up(md) {
        min-width: 16.5625rem; // 265px;
    }

    .with-label-widthauto & {
        min-width: auto;
    }
}

.pseudolabel {
    vertical-align: top;
    padding-right: $spacing-base;
    display: inline-block;
}

.stacked-label {
    display: inline-block;
    @include media-breakpoint-up(md) {
        width: 12.5rem; // 200px;
    }
}

.pieform-fieldset {
    .html {
        &:not(tr) {
            @include clearfix;
        }
    }
}

.as-card form {
    margin-top:0;
}

.main table form {
    margin:0;
}

.textarea label {
    vertical-align: top;
}

.wysiwyg {
    label {
        display: block;
        vertical-align: top;
        + .tox-tinymce {
            width:100%;
        }
    }
    &.view-description {
        width: 70%;
    }
    &.under-label-help {
        label + .tox-tinymce {
            width:70%;
        }
    }
}

input[type="radio"],
input[type="checkbox"] {
  margin: $spacing-sm 0 0 0;
  line-height: $line-height-base;
}

.radio,
.checkbox {
  position: relative;
  display: block;
  margin-top: $spacing-base;
  input.checkboxes,
  input.radio {
      z-index: 3;
  }

  label,
  .with-label {
    min-height: $line-height-computed; // Ensure the input doesn't jump when there is no text
    padding-left: $spacing-xl;
    font-weight: $font-weight-normal;
    cursor: pointer;
  }
}

.radio input[type="radio"],
.radio-inline input[type="radio"],
.checkbox input[type="checkbox"],
.checkbox-inline input[type="checkbox"] {
  position: absolute;
}

.radio-aligned {
    display: inline-block;
}
.no-radio {
    margin-left: $spacing-xl;
}

// group plans choose template radios overlap
.radio input[type="radio"].templatelist {
    position: inherit;
    margin-right: $spacing-sm;
}

// for multiselect buttons
.select-col {
    width : 6.25rem; // 100px;
}

.align-with-input {
    display: inline-block;
    margin-left: 0;
    @include media-breakpoint-up(md) {
        margin-left: 16.5625rem; // 265px;
    }
    &.file {
        margin-top: -$spacing-xxl;
    }
    .option-alt & {
        margin: 0;
        display: block;
    }
}

.align-with-input-desc {
    display: inline-block;
    margin-left: 0;
}
.form-group.file label {
    vertical-align: top;
}

textarea {
  resize: none;

  &.resizable {
      resize: vertical;
  }
}

.form-inline {
    position: relative;
    label {
        display: block;
        &.inline-label {
            display: inline-block;
        }
    }
    .form-group {
        padding: 0;
        border-bottom: 0 none;
        align-items: flex-start;
        display: inline-block;

        input.checkbox {
            width: auto;
            margin-top: -0.375rem; // -6px;
        }
    }
    @include media-breakpoint-down(lg) {
        > .form-group {
            width: 100%;
        }
    }
    &.form-inline-align-bottom .form-group {
        vertical-align: bottom;
        align-self: flex-end;
    }
    &.form-short {
        select, input:not(.submit) {
            max-width:100%;
        }
        .form-group:not(.submit) {
            width: 60%;
        }
    }

    // buttons that follow an input in the same line need to inherit the same border radius as input
    .btn-secondary {
        border-radius: $input-border-radius-sm;
    }

    @include media-breakpoint-up(sm) {
        .form-control {
            display: inline-block;
            width: auto !important;
            vertical-align: middle;
          }
    }
}

.form-inline-align-bottom a {
    vertical-align: bottom;
    align-self: flex-end;
}

.form-control.file {
    padding: 0;
    box-shadow: none;
    border: none;
    background-color: transparent;
    border-radius: 0;
}

.form-control:disabled {
    color: $theme-text-midtone-color;
}

.form-message-inline  {
    vertical-align: top;
}

// date picker
.hasDatepickerwrapper input[type="text"],
.hasDatepickerwrapperacl input[type="text"] {
    position: relative;
    padding-right: 1.75rem; // 28px;
}
.hasDatepicker {
    padding-right: $spacing-xl;
}
.hasDatepickerwrapper:after {
    @include fonttype(regular);
    content: fa-content($fa-var-calendar-alt);
    font-size: $font-size-lg;
    color: scale-color($theme-text-color, $lightness: 25%);
    position:relative;
    right: 1.5625rem; // 25px;
    top: 0.0625rem; // 1px;
    pointer-events: none;
    cursor: text;
}
.hasDatepickerwrapperacl:after {
    @include fonttype(regular);
    content: fa-content($fa-var-calendar-alt);
    color: scale-color($theme-text-color, $lightness: 25%);
    right: $spacing-base;
    position: absolute;
    font-size: $font-size-lg;
    top: $spacing-sm;
}
.date-picker {
    position: relative;
    input.form-control {
        width: 100%;
        max-width:100%;
        z-index: 1;
        position:relative;
        &:not(:disabled) {
            background-color: transparent;
        }
        &:disabled {
            opacity: 0.5;
        }
    }
}

.progress {
    background: repeating-linear-gradient(45deg, scale-color($gray-100, $lightness: -5%), scale-color($gray-100, $lightness: -5%) 10px, $gray-100 10px, $gray-100 20px);
    .progress-bar {
        position: relative;
        height: 100%;
        &.small-progress span {
            display: block;
            left: 100%;
            padding-left: $spacing-sm;
            position: absolute;
            color: $gray-700;
        }
        .decompress-link {
            color: $progress-bar-color;
            text-decoration: underline;
            display: inline-block;
            margin-top: 0.5rem; // 8px;
        }
    }
}

.progress-iframe-outer,
#progress-iframe { // json progress bars, e.g. portfolio export, artefact extract
    border: $border-width solid $border-color;
    height: 2.5rem; // 40px;
    width: 100%;
    max-width: 40.625rem; // 650px;
    margin: $spacing-xl 0;
}

.progress-iframe-outer {
    background-color: $gray-100;
    height: 80px;
}

#progress_meter_message {
    width: 100%;
    text-align: center;
    padding: 5px;
}

.progress-iframe-inner {
    border: $border-width solid $border-color;
    width: 100%;
    height: 40px;
    background-color: #ffffff;
}

.progress-overlay {
    position: absolute;
}

input:disabled[type="text"] {
    color: $black;
}

// Add space when there are 2 selects next to each other
.select {
    + .select {
        margin-left: $spacing-sm;
    }
    &.form-group {
        + .select.form-group {
          margin-left: 0;
        }
    }
    + .submit:not(.input-group-append) {
        margin-left: $spacing-sm;
    }
}

// Styles for select2 in forms
// overriding select2 default styles
.select2-container-multi {
    max-width: 85% !important;
    display: inline-block;
    @include media-breakpoint-up(md) {
        width: 26.25rem !important; // 420px !important;
    }
    @include media-breakpoint-up(xl) {
        width: 31.25rem !important; // 500px !important;
    }
    &.select2-dropdown-open {
        .select2-choices {
            border-radius: $input-border-radius $input-border-radius 0 0;
        }
    }
    .select2-choices {
        @include box-shadow($input-box-shadow);
        border-radius: $input-border-radius;
        background-color: $body-bg;
        border: $input-border-width solid $input-border-color;
        background-image: none;
        width: 100%;
        .select2-search-choice {
            border: none;
        }
    }
}

.form-group.checkboxes .group-invite input[type="checkbox"] {
    float: left;
    top: 0;
    margin-right: $spacing-sm;
}

input[type="file"],
input[type="radio"] {
  &:focus  {
    outline: medium solid $input-focus-border-color;
  }
}

.exportable-artefact-container .checkbox .with-label a.viewlink {
    display: block;
}

// reset the select look to match select2
select {
  -moz-appearance: none;
  -webkit-appearance: none;
  appearance: none;
  background-image: url('../../raw/images/caret-down-solid.svg');
  background-repeat: no-repeat;
  background-position: right .7em top 50%;
  background-size: .5em auto;
  padding-right: 2rem !important; // to allow for arrow
}
.lrfieldlists select {
    background-image: none;
    padding-right: $input-btn-padding-x !important;
    min-height: 284px;
}

//sidebar search
input#sidebar-search {
    border-top-left-radius: $input-border-radius;
    border-bottom-left-radius: $input-border-radius;
}
.with-heading.searchform #search_query {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;

    ~ .btn-secondary {
        border-top-right-radius: $input-border-radius;
        border-bottom-right-radius: $input-border-radius;
    }
}
