@import './var.inc.styl'

// Normal Textbox
input.textbox, textarea.textbox
  form-styles()
  background-color: $input-background-color
  outline: $input-outline
  transition: outline-color .2s, border-color .2s
  transition-timing-function: ease-out-cubic

  &:focus
    border-color: $input-focus-border-color
    outline: $input-focus-outline
    outline-offset: 0

  // Overwrite, for IE compatibility
  &:read-only
    outline: 0

  &:disabled
    opacity: 0.5

textarea.textbox
  height: rem(200px)

div.textbox
  min-height: rem(200px)

.data-table
  input.textbox, textarea.textbox
    margin-bottom: 0

// Material Textbox
label.textbox.material
  input
    form-styles()
    border: 0
    background: none
    outline: 0
    padding-left: 0
    padding-right: 0
    color: $text-1-color
    border-bottom: 2px solid rgba($text-1-color, 0.4)
    transition: border-color .2s ease-out-cubic

    &:disabled, &:read-only
      color: rgba($text-1-color, 0.6)

    &:enabled:read-write:hover
      border-color: rgba($text-1-color, 0.8)

    &:enabled:read-write:focus
      border-color: $input-focus-border-color

  &.focus
    color: $input-focus-border-color

label.textbox.material.inverse
  color: rgba($immersive-text-color, 0.8)

  input
    color: $immersive-text-color
    border-color: rgba($immersive-text-color, 0.4)

    &:disabled, &:read-only
      color: rgba($immersive-text-color, 0.6)

    &:enabled:read-write:hover
      border-color: rgba($immersive-text-color, 0.8)

    &:enabled:read-write:focus
      border-color: $immersive-primary-color

  &.focus
    color: $immersive-primary-color