hydra/src/renderer/src/components/text-field/text-field.scss

@import "../../scss/variables";

.text-field-container {
  flex: 1;
  gap: $spacing-unit;
  display: flex;
  flex-direction: column;
}

.text-field {
  display: inline-flex;
  transition: all ease 0.2s;
  width: 100%;
  align-items: center;
  border-radius: 8px;
  border: solid 1px $border-color;
  height: 40px;
  min-height: 40px;

  &__primary {
    background-color: $dark-background-color;
  }

  &__dark {
    background-color: $background-color;
  }

  &__has-error {
    border-color: $danger-color;
  }

  &__focused {
    border-color: $search-border-color-focused;
  }

  &:not(&--focused):hover {
    border-color: $search-border-color-hover;
  }
}

.text-field__input {
  background-color: transparent;
  border: none;
  width: 100%;
  height: 100%;
  outline: none;
  color: $search-input-color;
  cursor: default;
  font-family: inherit;
  text-overflow: ellipsis;
  padding: $spacing-unit;

  &:focus {
    cursor: text;
  }

  &__read-only {
    text-overflow: inherit;
  }
}

.text-field__toggle-password-button {
  cursor: pointer;
  color: $muted-color;
  padding: $spacing-unit;
}

.text-field__wrapper {
  display: flex;
  gap: $spacing-unit;
}

.text-field__error-label {
  color: $danger-color;
}