.labeled-select {
  cursor: text;
  padding: 0;
  width: 100%;

  .selected {
    padding-top: $input-padding-lg;
  }
}

.unlabeled-select:not(.in-input) {
  // min-height: $unlabeled-input-height;
  min-height: $unlabeled-input-height;
}
.col {
  > .unlabeled-select:not(.taggable) {
    // padding-top: 5px;
  }
}

.labeled-select,
.unlabeled-select {
  min-width: 75px;
  min-height: 32px;
  width: $input-width;

  .required {
    color: var(--error);
  }

  label {
    width: calc(100% - 20px);
  }

  .validation-message {
    color: var(--error);
    float: right;
  }

  &.focused {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;

    &.vs__dropdown-up {
      border-radius: 0 0 var(--border-radius) var(--border-radius);
    }
  }

  .v-select {
    &.inline {

      .vs__search {
        background-color: transparent;
        border: 0px;
      }

      .vs__dropdown-toggle{
        border: solid var(--border-width) var(--input-border);
        height: 32px;
      }
      // .vs__dropdown-toggle,
      .vs__dropdown-toggle > * {
        background-color: transparent;
        border: transparent;
      }

      .vs__dropdown-menu {
        outline: none;
      }

      .selected {
        position: relative;
        top: 1.4em;
      }
    }
  }
  .v-select.inline.vs--single {

    &.vs--searching .vs__selected {
      display: none;
    }
    &:not(.vs--searching) {
      .vs__selected-options {
        overflow: hidden;
        flex-wrap: nowrap;
        .vs__selected {
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
          display: inline-block;
        }
      }
    }
  }

  .v-select.inline:not(.vs--single) {
    margin-bottom: -5px; // targets multi-select tag boxes to make the same size as rows next to it
    min-height: 30px;

    .vs__selected {
      min-height: 20px;
      padding: 0 7px;
      height: 21px;
      width: unset !important;

      &:not(:only-child) {
        margin-bottom: 2px;
        margin-top: 2px;
      }
    }
  }

  &.in-input {
    border-bottom-right-radius: 0;
    border-top-right-radius: 0;
  }

  &.focused {
    outline: none;
    .v-select {
      // Can toggle this to get full width dd - maybe make an option?
      .vs__dropdown-menu {
        min-width: max-content;
        background: var(--dropdown-bg);
      }
    }
  }

  &.disabled {
    // border: solid var(--border-width) var(--input-disabled-border);
    .vs__dropdown-toggle, input {
      cursor: not-allowed;
      background-color: var(--input-disabled-bg);
    }

    .v-select {
      background-color: var(--input-disabled-bg);
      border-color: var(--input-disabled-border);
      cursor: not-allowed;

      .vs__dropdown-toggle, input {
        cursor: not-allowed;
        background-color: var(--input-disabled-bg);

        .vs__selected {
          color: var(--input-disabled-text);
        }
      }
    }
  }
}

.unlabeled-select {
  background-color: var(--input-bg);
  border-radius: var(--border-radius);
  color: var(--input-text);
  padding: 0px 0;

  .vs--single .vs__selected-options {
    flex-wrap: nowrap;
  }

  .v-select {

    &.inline {
      height: 100%;

      .vs__dropdown-toggle {
        height: 100%;
      }
      .vs__actions {
        width: auto;
      }
    }
  }

  &:not(.view):not(.disabled) {
    background-color: var(--input-bg);
    // border: solid var(--border-width) var(--input-border);

    &:hover:not(.focused):not(.disabled) {
      &,
      .vs__dropdown-menu {
        box-shadow: 0 4px 6px 0 var(--input-border-box-shadow);
        // border: solid var(--border-width) var(--input-hover-border) !important;
      }
    }

    &.focused {
      &,
      .vs__dropdown-menu {
        // border: solid var(--border-width) var(--outline) !important;
      }
    }

  }

  .labeled-tooltip .status-icon {
    // top: $input-padding-sm;
  }
}