/*---------------------------------------------------------------------------------------------
 * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
 * See LICENSE.md in the project root for license terms and full copyright notice.
 *--------------------------------------------------------------------------------------------*/
@use "./variables";

@forward "../style/index";
@forward "./variables";

@mixin uicore-inputs-input {
  display: block;
  width: 100%;
  padding: variables.$uicore-iui-input-padding;
  margin: variables.$uicore-inputs-margin 0;
  font-family: var(--iui-font-sans);
  font-size: var(--iui-font-size-1);
  line-height: normal;
  color: var(--iui-color-text);
  background-color: var(--iui-color-background);
  background-image: none;
  border: 1px solid var(--iui-color-border-foreground);
  border-radius: var(--iui-border-radius-1);
  box-shadow: var(--iui-focus-box-shadow) 0px 1px 1px inset;
  box-sizing: border-box;
  transition: border-color var(--iui-duration-1) ease-in-out,
    box-shadow var(--iui-duration-1) ease-in-out;

  &:-ms-input-placeholder {
    color: var(--iui-color-text-disabled);
  }
  &::-webkit-input-placeholder {
    color: var(--iui-color-text-disabled);
  }
  &::placeholder {
    color: var(--iui-color-text-disabled);
  }

  &[disabled] {
    background-color: var(--iui-color-background-backdrop);
    border-color: var(--iui-color-text-disabled);
    color: var(--iui-color-text-disabled);
    cursor: not-allowed;
    opacity: var(--iui-opacity-4);
  }

  &[readonly] {
    color: var(--iui-color-text-muted);
    cursor: default;
  }

  &:focus {
    outline: 0px;
    border-color: hsl(var(--iui-color-foreground-hsl) / var(--iui-opacity-4));
    box-shadow: variables.$uicore-inputs-focus-boxshadow;
  }
}