@use 'libs/components/theme/src/lib/styles/mixins' as mixins;

.sky-select-field-multiple-select-mode {
  > .sky-btn {
    margin-bottom: 10px;
  }
}

.sky-select-field-single-select-mode {
  .sky-input-group {
    padding: 0;

    .sky-form-control {
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
      display: inline-block;
    }

    .sky-form-control,
    .sky-btn {
      border: 0;
    }

    &:hover {
      cursor: pointer;
    }

    .sky-form-control + .sky-input-group-btn {
      .sky-btn {
        padding-right: 5px;
      }
    }

    .sky-input-group-btn + .sky-input-group-btn {
      .sky-btn {
        padding-left: 5px;
      }
    }
  }
}

:host(.ng-invalid.ng-touched) .sky-select-field-btn {
  @include mixins.sky-field-status(invalid);
}
