// Copyright (C) 2019-2021 Estonian Information System Authority.
// See the file 'LICENSE' for copying permission.

// input control wrapper
.input:not([type="file"]):not([type="checkbox"]):not([type="radio"])
  @extend %input-reset
  padding: calc((#{$gap}/2) - .025rem)
  background: $white
  border: .05rem solid $border
  box-shadow: inset 0 .1rem .062rem rgba(0,0,0,.1)
  border-radius: $radius

  +dark-mode
    background-color: $background-dark
    border-color: $border-dark
    color: $text-color-dark

  &.is-small
    width: 4rem
  &:focus
    border: .05rem solid shade($border, .2)
    +dark-mode
      border-color: $border-dark

.input[type="checkbox"],
.input[type="radio"]
  margin: 0

// wrapper for a form control and a label
.field
  margin: $gap 0
  &.is-horizontal
    display: flex
    align-items: center
    flex-grow: 0
    & > *:not(:first-child)
        margin: 0 $gap/2
    .control
      flex-basis: auto
    .label
      flex-shrink: 0

// input control wrapper
.control
  position: relative
  min-height: 2rem
  border-radius: 2px
  .label
    display: inline-block
  // for select boxes, render an arrow
  &.is-select
    min-width: 10rem
    .input:hover
      cursor: pointer
      background-color: $light
    &:after
      pointer-events: none
      content: ""
      position: absolute
      right: .75rem
      top: 50%
      width: 0
      height: 0
      border-style: solid
      border-width: 3px 3px 0 3px
      border-color: shade($border, .2) transparent transparent transparent

  // tweak the layout for file inputs
  &.is-file
    .file-trigger
      @extend .button
      text-align: center
      font-size: 1em
      font-weight: 600
      opacity: 1
    input[type="file"]
      @extend .hidden

  &.is-checkable
    padding: $gap/2 0
    .label
      margin-top: 0
      margin-bottom: 0

  // support for addon icons
  &.has-addon
    display: flex
    align-items: center
    padding: 0 $gap/2
    border: .10rem solid $border
    background-color: $white

    +dark-mode
      background-color: $background-dark
      border-color: $border-dark

    .input, .input:focus
      border: 0 !important
      background: transparent
    // make sure to eliminate any vertical space
    .addon
      font-size: .8em
      &.is-left
        margin-right: $gap/2
      &.is-right
        margin-left: $gap/2
    .label
      padding: 0 $gap/2
    &.is-borderless
      border: 0
      padding-left: 0
      padding-right: 0

// control label
.label
  display: block
  font-weight: 500
  margin: $gap/2 0
  font-size: .9em
  opacity: .75
  white-space: nowrap

  &.is-set-title
    font-size: 1.1em

// a special standalone control variety, including a label and a control in one
// element
.field.is-inline
  @extend .columns
  @extend .is-divided
  @extend .is-vcenter
  @extend .is-gapless
  @extend .input
  & > .control,
  & > .label,
  & > .field-end
    @extend .column
  & > .field-end,
  & > .label
    @extend .is-auto
    margin: 0 $gap
    &:last-child
      margin-right: 0
    &:first-child
      margin-left: 0
  & > .control
    @extend .columns
    @extend .is-vcenter
    & > .input
      line-height: 1.2rem
      &,
      &:active
        border-color: transparent
        background: transparent
      &:focus
        background: $light
        border-color: $border
        border-radius: $radius

// special standalone ui variation that groups radio's as if they're togglable
// options in a button-like fashion
.multi-toggle
  display: flex

  label
    border-width: .0625rem 0 .0625rem .0625rem
    border-style: solid
    border-color: $border
    background-color: $white
    color: $blue
    padding: $gap
    font-weight: 600

    &:hover
      cursor: pointer

    +dark-mode
      border-color: $border-dark
      background-color: $dark
      color: $white

  .control:first-child label
    border-top-left-radius: $radius
    border-bottom-left-radius: $radius
  .control:last-child label
    border-right-width: .0625rem
    border-top-right-radius: $radius
    border-bottom-right-radius: $radius

  input
    display: none
    &:checked + label
      background-color: $blue
      color: $white
    &[disabled] + label
      color: $border
      background-color: $white
      &:hover
        cursor: not-allowed

.key-value-fields
  width: 100%
  border-collapse: collapse

  th
    @extend .label
    display: table-cell
    text-align: left

  tbody td:not(:last-child),
  thead th:not(:last-child)
    padding: $gap/2

  tbody tr:hover td
    background-color: $light
    +dark-mode
      background-color: $dark

  tbody tr:not(:last-child) td
    border-bottom: .0625rem solid $border
    +dark-mode
      border-bottom-color: $border-dark

  .button
    display: block
    width: 100%

  tfoot
    text-align: center
    .field-key
      padding-right: 0
    .field-value
      padding-left: 0
    td.field-key .control .input
      border-top-right-radius: 0
      border-bottom-right-radius: 0
    td.field-value .control .input
      border-top-left-radius: 0
      border-bottom-left-radius: 0
