.wui-input-wrapper {
  @apply transition-all duration-200;
  @apply rounded h-10 w-full relative;
  @apply flex items-center justify-between;
  @apply cursor-pointer text-left antialiased;
  @apply box-border overflow-hidden;
  @apply border;
  @apply bg-white border-neutral-300;
  @apply dark:(bg-neutral-800 border-neutral-700);

  &:not(:last-child) {
    @apply rounded-r-none;
  }

  &:not(:first-child) {
    @apply rounded-l-none;
  }

  &:focus-within {
    @apply border border-accent-400;

    &:hover {
      @apply border-accent-500;
    }
  }

  &:hover {
    @apply border-neutral-500;
  }

  &--disabled,
  &--disabled:hover {
    @apply opacity-50 cursor-not-allowed;

    .wui-input:disabled {
      @apply text-neutral-700 cursor-not-allowed;
      @apply dark:text-neutral-400;
    }

    .wui-input-icon {
      @apply cursor-not-allowed;
    }
  }

  &--success {
    @apply bg-success-300;
    &:hover {
      @apply !border-success-500;
    }
    &:focus-within {
      @apply shadow-current !border-success-600;
    }
    &:disabled {
      @apply border-neutral-400;
    }
  }

  &--warning {
    @apply bg-warning-300;
    &:hover {
      @apply !border-warning-500;
    }
    &:focus-within {
      @apply shadow-current !border-warning-600;
    }
    &:disabled {
      @apply border-neutral-400;
    }
  }

  &--danger {
    @apply bg-danger-300;
    &:hover {
      @apply !border-danger-500;
    }
    &:focus-within {
      @apply shadow-current !border-danger-600;
    }
    &:disabled {
      @apply border-neutral-400;
    }
  }
}

.wui-input {
  @apply h-full w-full py-4 px-3 box-border inline-block;
  @apply bg-none outline-none border-none text-base;
  @apply bg-white;
  @apply dark:(bg-neutral-800);

  .wui-input-icon-wrapper + & {
    padding: 4px 0;
  }

  &::placeholder {
    @apply text-neutral-500;
    text-indent: 0;
    transition: text-indent 0.27s ease;
  }

  &:focus::placeholder {
    text-indent: 6px;
  }

  &-mask {
    @apply top-0 right-0 bottom-0 left-0 z-40 fixed;
    background-color: rgba(90, 98, 112, 0.5);
  }
}

.wui-input-prefix-wrapper {
  @apply flex relative;

  &.masked {
    @apply z-50;
  }

  .wui-input-prefix,
  .wui-input-suffix {
    @apply flex px-4 justify-center items-center;
    @apply border text-sm;
    @apply bg-neutral-100 border-neutral-300 text-neutral-600;
    @apply dark:(bg-neutral-800 border-neutral-700 text-neutral-400);
    line-height: 1;
  }

  .wui-input-prefix {
    @apply rounded-tl rounded-bl border-r-0;
  }

  .wui-input-suffix {
    @apply rounded-tr rounded-br border-l-0;
  }
}

.wui-input-label {
  @apply text-left block;
  @apply text-current mb-2;
}

.wui-input-message {
  @apply text-sm inline-block pt-1;

  &--success {
    @apply text-success-700;
  }

  &--warning {
    @apply text-warning-700;
  }

  &--danger {
    @apply text-danger-700;
  }

  &--disabled {
    @apply text-neutral-600;
  }
}

.wui-input-icon {
  @apply text-neutral-400;
  cursor: default;
  margin: 0 8px;
  vertical-align: middle;
}

.wui-input-icon-wrapper {
  align-items: center;
  display: flex;
  justify-content: center;
}