@use "sass:math";
@use "sass:list";

.pieform,
.dropdown {
    .picker {
        position: relative;
        background: $body-bg;
        display: inline-block;
        min-width: 1.25rem; // 20px;
        max-width: 100%;
        border-radius: $input-border-radius;
        text-align: left;

        &.input-short {
            max-width: 12.5rem; // 200px;
            .select2 {
                width: auto !important; // js is doing some weird calculations and getting the width wrong. Override inline js
                min-width: 9.375rem; // 150px;
                display:block;
            }
            .select2-selection {
                border-color: $input-border-color;
            }
            .select2-selection:focus {
                border-color: $input-focus-border-color;
            }
        }
        .select2-container--default .select2-selection--single .select2-selection__arrow b {
            display:none;
        }
        &:before {
            @include fonttype(solid);
            content: fa-content($fa-var-caret-down);
            margin-top: 0.625rem; // 10px;
            position: absolute;
            right: 0%;
            top: 0;
            height: 1.0625rem; // 17px;
            padding-left: $spacing-base;
            padding-right: $input-padding-x;
            line-height: 1;
            z-index: 2;
        }
        select.form-control {
            @include appearance(none);
            position: relative;
            padding-right: $spacing-xxl;
            background: transparent;
            height: $input-height;
            left: 0;
            margin: 0;
            cursor: pointer;
            top: 0;
            width: 100% !important;
            max-width: 100%;
            z-index: 5;
            &:disabled {
                background: rgba(0,0,0,0.03);
            }
            &:focus {
              outline: medium solid $input-focus-border-color;
            }
        }
        &.date {
            margin-left: 0.25rem !important; // 4px !important;
        }

        & + button.icon {
            margin-left: $spacing-sm;
            height: $input-height;
        }
    }

    &.theme-dropdown {
        margin-top: $spacing-xxl;
    }

    &.form-condensed {
        .picker {
            max-width: 67%;
        }
    }

    .input-sm {
        padding: 0.14375rem $spacing-base; // 2.3px 10px;
        font-size: $font-size-sm;
        &.picker {
            padding: 0;
        }
        &.picker,
        .picker {
            &:before {
                margin-top: 0.5rem; // 8px;
            }
            select.form-control {
                height: $input-height-sm;
                line-height: list.slash($input-height-sm, 2) + 0.125rem;
            }
        }
    }

    .input-lg {
        &:before {
            margin-top: 0.75rem; // 12px;
        }
        &.picker select.form-control,
        .picker select.form-control {
            padding-top: $spacing-sm;
            padding-bottom: $spacing-sm;
            height: $input-height-lg;
            line-height: list.slash($input-height-lg, 2) + $spacing-xs;
        }
    }

    .select-group  {
        .input-group-addon {
            display: inline-block;
            float: left;
            height: $input-height;
            line-height: list.slash($input-height, 2);
        }
    }
    .input-short-error {
        max-width: 12.8125rem; // 205px;
        display: inline-block;
        width: 14.375rem; // 230px;
    }
}


.last-updated-offset {
    margin-top: $spacing-xxl;
}

.dropdown-toggle {
    border-radius: $input-border-radius;
}

.dropdown-single-option {
    .picker {
        select.form-control:disabled {
            cursor: default;
            background: $body-bg;
            border: 0;
            box-shadow: none;
            color: $theme-text-midtone-color;
            padding-right: 0;
        }
        &.input-short {
            margin-top: $spacing-sm;
        }
    }
}

.dropdown-menu {
    z-index: 10;
    padding: 0;
    min-width: 14rem;
    > li {
        padding: 0;
        > a {
            padding: $dropdown-item-padding-y $dropdown-item-padding-x;
            color: $dropdown-link-color;
            display: block;

            &:hover,
            &:focus {
                text-decoration: none;
            }
        }
        &:active > a {
            color: $dropdown-link-active-color;
            background-color: $dropdown-link-active-bg;
        }
        > span.nolink {
            padding: $dropdown-item-padding-y $dropdown-item-padding-x;
            display: block;
            white-space: nowrap;
        }

        &.with-icon a {
          margin-left: 1.5rem;

          .icon.left {
              width: 2rem;
              text-align: center;
              padding-right: 0;
              margin-left: -2rem;
          }
        }
    }
    > .active {
        background-color: $dropdown-link-active-bg;
        > a {
            color: $dropdown-link-active-color;
            text-decoration: none;
            outline: 0;
            background-color: $dropdown-link-active-bg;
            &:hover,
            &:focus {
                text-decoration: none;
                outline: medium solid $input-focus-border-color;
            }
        }
    }
}

.dropdown-item {
    padding: 0;
    white-space: normal;
    a {
      padding: $dropdown-item-padding-y $dropdown-item-padding-x;
      color: $dropdown-link-color;
      display: block;
      text-decoration: none;

      &:hover,
      &:focus {
          text-decoration: none;
          color: $dropdown-link-hover-color;
          background-color: $dropdown-link-hover-bg;
      }
    }
    &:active,
    &.active {
        background-color: $dropdown-link-active-bg;
        a {
            color: $dropdown-link-active-color;
        }
    }
}

.card-footer {
    .dropdown-menu {
        .dropdown-item {
            padding: 0;
            a {
                display: block;
                text-decoration: none;
                &.seperator {
                    border: 0;
                }
            }
        }
    }
}

// override bootstrap select2 default bg color "success"
.select2-container--default .select2-dropdown .select2-results__option--highlighted[aria-selected] {
    background-color: $dropdown-link-hover-bg !important;
    color: $dropdown-link-hover-color !important;
}

// dropdowns on Share
.search-user-dropdown {
  .select2-results ul li > div {
    margin-left: $spacing-xxxl;
    margin-right: $spacing-xl; // needed so it doesn't horizontally scroll for some long ones
    color: $theme-text-midtone-color;
    font-size: $font-size-sm;
    &.name {
      color: $theme-text-color;
      font-size: $font-size-base;
    }
  }
}

// focus
.select2-container {
  &:focus,
  &:focus-within {
    outline: medium solid $input-focus-border-color;
  }
}
// tags input
.select2-container--default .select2-selection--multiple .select2-selection__rendered {
    padding: 0 $input-padding-x;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice {
    font-size: $font-size-sm;
    margin-top: 0.375rem; // 6px;
    margin-left: -0.375rem; // 6px;
    margin-right: 0.75rem; // 12px;
}

// get tag inputs to inherit the input radius variable for quicker change
.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple {
    border-radius: $input-border-radius !important;
}

// dropdown select2
.select2-container .select2-selection--single .select2-selection__rendered {
  padding-left: $dropdown-item-padding-x;
  padding-right: $spacing-xxl;
}
.select2-results__option {
  padding: $dropdown-item-padding-y $dropdown-item-padding-x;
  color: $dropdown-link-color;
}

// dropdown select2 with profile img
.select2-results__option span,
.search-user-dropdown .select2-results ul li > div.name {
  line-height: 1.2;
  vertical-align: middle;
  display: table-cell;
  height: 38px;
}

// configure column dropdown on submissions
#submissions_wrapper div.dt-button-collection {
  left: 0 !important;
}
