@use "colors.sass" as c

@mixin disabled
  background-color: c.$bg-dark
  color: #808080

fieldset
  border: none
  padding: 55px 0px 0px 0px
  position: relative

  @media screen and (max-width: 400px)
    padding-top: 70px

  legend
    position: absolute
    top: 5px
    left: 0px
    width: 100%
    font-size: 28px
    font-weight: bold
    padding: 0
    border-bottom: 1px solid #333
    line-height: 1.56

    @media screen and (max-width: 400px)
      margin-top: 15px


.field-row
  line-height: 1
  display: flex
  align-items: center
  justify-content: space-between
  position: relative
  padding-bottom: 5px
  margin-bottom: 5px
  border-bottom: 1px solid #bbb

  @media screen and (max-width: 400px)
    flex-direction: column
    align-items: start
    padding-bottom: 15px

  .description
    padding: 8px 8px 8px 0px

//
  .checkbox-row
    .pill
      display: flex
      align-items: center
      user-select: none

    .fake-checkbox
      -webkit-appearance: none
      background-color: white
      width: 16px
      height: 16px
      padding: 0px
      border: 1px solid #666
      border-radius: 3px
      margin-left: 8px
      position: relative
      outline: none

    .checkbox
      display: none

      &:checked + .pill .fake-checkbox
        background: center center / contain url(/static/img/tick.svg)

      &:disabled + .pill
        @include disabled

        .fake-checkbox
          @include disabled

      &.checkbox:not(:disabled) + .pill
        @include acts-like-button
        cursor: pointer

@mixin checkbox-hider($base)
  ##{$base}
    position: relative
    left: 10px
    display: block
    z-index: 1
    height: 42px
    margin: 0

  .#{$base}-container
    position: relative
    display: grid // why does the default not work???
    top: -42px
    background: c.$bg-accent-x
    line-height: 1
    border-radius: 8px
    margin-bottom: -18px

    .#{$base}-label
      padding: 12px 0px 12px 32px
      cursor: pointer

@mixin single-button-form
  display: inline-block
  white-space: pre-wrap // preserve whitespace inside the form at the edge

  > button
    background: none
    padding: 0
    margin: 0
    border: none
    color: inherit
    font-family: inherit
    font-size: inherit
    text-decoration: underline