// SPDX-FileCopyrightText: 2022 Gregor Kleen <gregor.kleen@ifi.lmu.de>
//
// SPDX-License-Identifier: AGPL-3.0-or-later
// SPDX-License-Identifier: LicenseRef-Fraport-Corporate-Design

@use "../../app" as *
  
// GENERAL STYLES FOR FORMS

// FORM GROUPS
.form-section-title
  color: var(--color-fontsec)
  margin: 0

  + .form-group
    margin-top: 11px

.form-group
  position: relative
  display: flex
  display: grid
  grid-template-columns: 1fr 3fr
  grid-gap: 5px
  justify-content: flex-start
  align-items: flex-start

  + .form-group, + .form-section-legend, + .form-section-notification
    margin-top: 11px

  + .form-section-title
    margin-top: 40px

.form-section-legend
  @extend .explanation
  margin: 7px 0

.form-group__hint, .form-section-title__hint
  color: var(--color-fontsec)
  font-size: 0.9rem
  font-weight: 600

.form-section-title__hint
  margin-top: 7px

  + .form-group
    margin-top: 11px

.form-group-label
  font-weight: 600
  padding-top: 6px

.form-group-label__hint
  margin-top: 7px
  color: var(--color-fontsec)
  font-size: 0.9rem

.form-group--required > .form-group-label > .form-group-label__caption::after, .form-group__required-marker::before
  content: ' *'
  color: var(--color-error)
  font-weight: 600
  font-style: normal

.form-group--potentially-required > .form-group-label > .form-group-label__caption::after, .form-group__potentially-required-marker::before
  content: ' †'
  color: var(--color-warning)
  font-weight: 600
  font-style: normal
  vertical-align: super
  font-size: 80%

.form-group--submit .form-group__input
  grid-column: 2

@media (max-width: 768px)
  .form-group--submit .form-group__input
    grid-column: 1

.form-group--has-error
  background-color: rgba(140, 7, 7, 0.05)

  .form-group-label
    border-left: 2px solid var(--color-error)
    align-self: stretch
    padding-left: 7px

  input, textarea
    border-color: var(--color-error) !important

  .form-error
    display: block
    font-weight: 600
    color: var(--color-error)
    margin: 7px 0
    white-space: pre-wrap

.form-error
  display: none

.standalone-field
  display: inline-flex

  &__error
    display: none
    align-self: center
    flex: 0 0 auto

    .tooltip__content
      font-weight: 600
      color: var(--color-error)
      white-space: pre-wrap

  &--has-error
    input, textarea
      border-color: var(--color-error) !important

    .standalone-field__error
      display: block
   

@media (max-width: 768px)
  .form-group
    grid-template-columns: 1fr
    align-items: baseline
    margin-top: 17px
    flex-direction: column

// TEXT INPUTS
input[type='text'],
input[type='search'],
input[type='password'],
input[type='url'],
input[type='number'],
input[type='email'],
input[type*='date'],
input[type*='time'],
select
  // from bulma.css
  color: #363636
  border-color: #dbdbdb
  background-color: #f3f3f3
  box-shadow: inset 0 1px 2px 1px rgba(50, 50, 50, 0.05)
  width: 100%
  max-width: 600px
  align-items: center
  border: 1px solid transparent
  border-radius: 4px
  font-size: 1rem
  font-family: var(--font-base)
  line-height: 1.5
  padding: 4px 13px

input[type='number']
  width: 100px

input[type*='date'],
input[type*='time'],
.flatpickr-input[type='text']
  width: 50%
  width: 250px

// BUTTON STYLE SEE default-layout.lucius

// TEXTAREAS
textarea
  width: 100%
  height: 170px
  max-width: 600px
  line-height: 1.5
  color: #363636
  background-color: #f3f3f3
  padding: 4px 13px
  font-size: 1rem
  font-family: var(--font-base)
  appearance: none
  border: 1px solid #dbdbdb
  border-radius: 2px
  box-shadow: inset 0 1px 2px 1px rgba(50, 50, 50, 0.05)
  vertical-align: top

// SHARED STATE RELATED STYLES

input,
select,
textarea
  &:focus
    border-color: #3273dc
    box-shadow: 0 0 0 0.125em rgba(50, 115, 220, 0.25)
    outline: 0

  &[disabled]
    background-color: #f3f3f3
    color: #7a7a7a
    box-shadow: none
    border-color: #dbdbdb

  &[readonly]
    background-color: #f5f5f5
    border-color: #dbdbdb

// OPTIONS

select[size="1"], select:not([size])
  appearance: menulist

select,
option
  font-size: 1rem
  line-height: 1.5
  padding: 4px 13px
  border: 1px solid #dbdbdb
  border-radius: 2px
  outline: 0
  color: #363636
  min-width: 250px
  width: auto
  background-color: #f3f3f3
  box-shadow: inset 0 1px 2px 1px rgba(50, 50, 50, 0.05)

@media (max-width: 425px)
  select, option
    width: 100%

// FILE INPUT
.file-input
  display: none

.file-input__label
  cursor: pointer
  display: inline-block
  background-color: var(--color-primary)
  color: white
  padding: 10px 17px
  border-radius: 3px

.file-input__info
  font-size: .9rem
  font-style: italic
  margin: 10px 0
  color: var(--color-fontsec)

.file-input__list-wrapper
  overflow: auto
  max-height: 75vh
  max-width: 30vw

.file-input__list
  margin-left: 40px
  margin-top: 10px
  font-weight: 600

  tr:last-child td
    padding-bottom: 0

  .file-input__list-item
    font-family: var(--font-monospace)
    font-size: 15px
    word-break: break-all

// PREVIOUSLY UPLOADED FILES

.file-uploads-label
  margin-bottom: 10px

.file-container
  display: flex
  align-items: center
  margin-bottom: 10px

  .checkbox
    margin-left: 12px

.form--vertical .form-group__input
  grid-column: unset
  grid-row: 2

.form-group.form--vertical
  grid-template: auto auto / auto

.form--vertical__cell
  vertical-align: top

// PASSWORD INPUT

.password-input__wrapper
  display: grid
  grid-template-areas: 'input toggle'
  width: 100%
  max-width: 600px
  grid-template-rows: auto
  grid-template-columns: 1fr auto

  .password-input__input
    grid-area: input

  .password-input__toggle
    grid-area: toggle

    display: flex
    justify-content: center
    align-content: center
    flex-direction: column
    padding: 7px

    cursor: pointer
    color: var(--color-fontsec)
    &:hover
      color: var(--color-font)