@use "../../style/variables" as *;

// use for the `input` tag
@mixin input-default {
  box-sizing: border-box;
  width: 100%;
  margin: 0;
  color: var(--ty-input-color, var(--ty-color-text));
  border: 1px solid var(--ty-input-border);
  transition: all 0.3s;
  outline: 0;
  border-radius: var(--ty-input-radius, var(--ty-border-radius));
  font-size: var(--ty-input-font-size-md, var(--ty-font-size-base));
  background-color: var(--ty-input-bg, var(--ty-color-bg-container));
  box-shadow: var(--ty-input-shadow, none);

  &:hover {
    border-color: var(--ty-input-border-hover, var(--ty-color-primary));
  }

  &:focus {
    border-color: var(--ty-input-border-focus, var(--ty-color-primary));
    box-shadow: var(--ty-input-shadow-focus, var(--ty-shadow-focus));
  }

  &::placeholder {
    color: var(--ty-input-placeholder, var(--ty-color-text-placeholder));
  }
}

@mixin input-default-disabled {
  cursor: not-allowed;
  background-color: var(--ty-input-bg-disabled, var(--ty-color-bg-disabled));
  color: var(--ty-input-text-disabled, var(--ty-color-text-quaternary));

  &:hover {
    border-color: var(--ty-input-border);
  }
}