.textbox-wrapper {
  display: inline-block;
  border: 2px solid transparent;
  transition: 0.2s ease;
  margin-bottom: 2px;
  border-radius: 6px;
  background: white;
  margin-bottom: 4px;
}

.textbox-wrapper:has(input:enabled:hover),
.textbox-wrapper:has(textarea:enabled:hover)
{
  outline: none;
  border: 2px solid var(--accent-fade);
  background-color: #fff;
}

.textbox-wrapper:has(input:enabled:focus),
.textbox-wrapper:has(textarea:enabled:focus)
{
  outline: none;
  border: 2px solid var(--accent-fade);
  background-color: #fff;
}

.admin-page .textbox-wrapper:has(input:enabled:hover),
.admin-page .textbox-wrapper:has(input:enabled:focus),
.admin-page .textbox-wrapper:has(textarea:enabled:hover),
.admin-page .textbox-wrapper:has(textarea:enabled:focus)
{
  border: 2px solid #ff5d389d;
}

.textbox-wrapper input,
.textbox-wrapper textarea
{
  width: 100%;
  height: 32px;
  line-height: 22px;
  padding-left: 0.5rem;
  border: 1px solid #ccc;
  background-color: #f9f9f9;
  color: #333;
  transition: 0.2s ease;
  margin: 0;
  outline: none;
}

.textbox-wrapper input .has-icon,
.textbox-wrapper textarea .has-icon
{
  padding-left: 2.5rem;
}

.textbox-wrapper input:enabled:hover,
.textbox-wrapper textarea:enabled:hover
{
  border: 1px solid #fff;
  background-color: white;
}

.textbox-wrapper input:enabled:focus,
.textbox-wrapper textarea:enabled:focus
{
  border-color: var(--accent);
  background-color: white;
}


.admin-page .textbox-wrapper input:focus,
.admin-page .textbox-wrapper textarea:focus
{
  border-color: #ff5d38;
}

.textbox-wrapper input::placeholder,
.textbox-wrapper textarea::placeholder
{
  transition: color 0.3s ease;
  color: #999;
}

/* .textbox-wrapper input:focus::placeholder {
  color: transparent;
} */

.textbox-wrapper input::placeholder,
.text-box-wrapper input::-ms-input-placeholder
.textbox-wrapper textarea::placeholder,
.textbox-wrapper textarea::-ms-input-placeholder
{
  color: red;
}

.textbox-wrapper .input-icon,
.textbox-wrapper textarea .input-icon
{
  position: absolute;
  left: 1rem;
  fill: #9e9ea7;
  width: 1rem;
  height: 1rem;
}

/* disabled */
.textbox-wrapper input:disabled,
.textbox-wrapper textarea:disabled
{
  background-color: #e0e0e0;
  color: #999;
}

.textbox-wrapper input:not(.pulse) {
  box-shadow: none;
}