input,
textarea,
.select {
  background: var(--input-bg);
  border-radius: 8px;
  border: none;
  box-shadow: 0px -2.5px 4px 0px var(--input-shadow) inset;
  color: var(--input-color-type);
  display: flex;
  font-size: 16px;
  font-weight: 500;
  letter-spacing: -0.16px;
  line-height: 16px;
  outline: none;
  padding: 11px 16px;
  position: relative;
  transition: all 0.2s cubic-bezier(0, 0, 0.58, 1);
  width: 100%;
}

input::placeholder,
.select {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

input::placeholder,
textarea::placeholder,
.select {
  color: var(--input-color);
}

input:hover,
textarea:hover,
.select:hover {
  background: var(--input-bg-hover);
}

input:focus,
textarea:focus,
.select:active {
  background: var(--input-bg-active);
}

.input-border {
  background-image: var(--input-border);
  border-radius: 8px;
  bottom: -1.5px;
  content: '';
  left: -1.5px;
  position: absolute;
  right: -1.5px;
  top: -1.5px;
}

textarea {
  line-height: 24px;
  min-height: 120px;
  overflow-y: hidden;
  resize: none;
}

.select {
  cursor: pointer;
  gap: 8px;
  transition: color 0.2s cubic-bezier(0, 0, 0.58, 1);
  user-select: none;
  width: fit-content;
}

.select.insert {
  color: var(--input-color-active);
}

.select:hover {
  color: var(--input-color-hover);
}

.select:active {
  color: var(--input-color-active);
}

.select i {
  color: var(--select-icon-color);
  padding-top: 2px;
  transition: color 0.2s cubic-bezier(0, 0, 0.58, 1),
    transform 0.2s cubic-bezier(0.2, 1, 0.3, 1);
}

.menu--enabled ~ .select i {
  color: var(--select-icon-color-active);
  transform: rotate(180deg);
}

.select:hover i {
  color: var(--select-icon-color-hover);
}

.select:active i {
  color: var(--select-icon-color-active);
}