@import "../../atoms/functions/string-replace";
//TODO: fjern når du har fundet ud af hvordan man kan sætte fill color med en css variabel eller lignende

.form {
  $form-inline-label-spacing: -4;
  $form-textarea-min-height-lines: 3.5;
  $form-textarea-max-height-lines: 13.5; //about 500 characters on an iPhone 11

  //inline font-awesome svg icons for checkbox, encoded using: https://yoksel.github.io/url-encoder/
  $svg-icon-checkbox: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath d='M443.3 100.7C449.6 106.9 449.6 117.1 443.3 123.3L171.3 395.3C165.1 401.6 154.9 401.6 148.7 395.3L4.686 251.3C-1.562 245.1-1.562 234.9 4.686 228.7C10.93 222.4 21.06 222.4 27.31 228.7L160 361.4L420.7 100.7C426.9 94.44 437.1 94.44 443.3 100.7H443.3z'/%3E%3C/svg%3E");

  &>*:last-child:not(.button-container) {
    margin-bottom: 0;
  }

  //wrapper needed since legend does not support display flex in all browsers
  label,
  legend,
  legend .fieldset__legend-wrapper,
  &__field__label {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    @include set-font(0, "single", $max-width: "default");
    margin: 0;
  }


  &__field {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    margin-bottom: spacing($forms-margin-field);

    &--horizontal {
      flex-direction: row;
      align-items: center;
      max-width: $line-width-max;

      & input {
        flex: 0 0 auto;
        order: -1;
        align-self: flex-start;
      }

      & label {
        padding-left: spacing($forms-margin-label-horizontal);
      }
    }

    textarea,
    input,
    select {
      border-radius: 0;
      -webkit-appearance: none;
      appearance: none;

      &:focus {
        position: relative;
        z-index: $z-index-just-above-static;
        outline: $outline-width solid color("utility-focus");
        outline-offset: $outline-offset;
      }
    }

    textarea,
    #{$forms-character-input-types} {
      @include set-font(0, "single", $max-width: "default");
      @include set-colors("background-input");
      margin-top: spacing($forms-margin-label);
      padding: spacing($forms-padding-vertical) spacing($forms-padding-horizontal);
      border: color("border") $width-border solid;
      width: 100%;
      border-radius: 0;
    }

    &--full-width {
      max-width: none;
      width: 100%;

      &.form__field--inline-label:not(.form__field--horizontal),
      textarea,
      #{$forms-character-input-types} {
        max-width: none;
      }
    }

    input {

      &[type="checkbox"],
      &[type="radio"] {
        display: inline-flex;
        align-items: center;
        justify-content: center;

        background-color: color("interactive");
        height: spacing($forms-margin-label, $times: 2, $add: line-height("single", $include-calc: false));
        width: spacing($forms-margin-label, $times: 2, $add: line-height("single", $include-calc: false));
        box-shadow: $shadow-style-center color("shadow");

        &:not([disabled]):hover {
          background-color: color("interactive-hover");
        }

        &:checked {
          background-repeat: no-repeat;
          background-position: center center;
          background-size: auto font-size(0);
          @include set-colors("theme");

          &:not([disabled]):hover {
            background-color: color("theme-hover");
          }
        }

        &:not([disabled]):active {
          box-shadow: $shadow-style-back color("shadow");
          outline: none;
        }
      }

      &[type="checkbox"] {
        border-radius: 0;

        &:checked {
          background-color: color("theme");

          &::before {
            content: "";
            display: block;
            height: line-height("single");
            width: line-height("single");
            background-color: color("theme-foreground");

            --svg-icon-checkbox: #{$svg-icon-checkbox};

            $icon-checkbox-mask: var(--svg-icon-checkbox) 0 0 / auto 100% no-repeat;
            -webkit-mask: $icon-checkbox-mask;
            mask: $icon-checkbox-mask;

            //compentsate for checkmark icon not being completly centred on svg canvas
            position: relative;
            left: .1rem;
          }
        }
      }

      &[type="radio"] {
        border-radius: 50%;

        &:checked {
          &::before {
            content: "";
            display: block;
            height: spacing($forms-margin-label, $times: 2);
            width: spacing($forms-margin-label, $times: 2);
            border-radius: 50%;
            background-color: color("theme-foreground");
          }
        }
      }

      //fix height of input[type="date"] on iOS, that has little default height
      &[type="date"] {
        height: spacing($forms-padding-vertical, $times: 2, $add: "#{line-height("single", $include-calc: false)} + #{2 * $width-border}");
      }


      //fix center alignment of date input on iOS https://stackoverflow.com/questions/37457097/input-type-date-text-alignright-ios-devices
      &::-webkit-date-and-time-value {
        text-align: left;
      }
    }

    textarea {
      line-height: line-height("multiple");
      min-height: spacing($forms-padding-vertical, $add: line-height("multiple", $include-calc: false, $times: $form-textarea-min-height-lines), $subtract: $width-border * -2);
    }

    select {
      @include set-font(0, "single", $max-width: "default");
      @include set-colors("interactive");
      margin-top: spacing($forms-margin-label);
      padding: spacing($forms-padding-vertical) spacing($forms-padding-horizontal) spacing($forms-padding-vertical) spacing($forms-padding-horizontal, $add: "#{font-size(0)} + #{spacing($forms-select-icon-spacing)}");
      width: 100%;
      border: transparent 2px solid;
      box-shadow: $shadow-style-center color("shadow");
      background-repeat: no-repeat;
      background-position: spacing($forms-padding-horizontal) center;
      background-size: font-size(0) auto;

      .theme--dark &,
      .theme--normal .theme--dark & {
        $color: str-replace(#{color-neutral("background")}, "#");
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath fill='%23#{$color}' d='M4.251 181.1C7.392 177.7 11.69 175.1 16 175.1c3.891 0 7.781 1.406 10.86 4.25l197.1 181.1l197.1-181.1c6.5-6 16.64-5.625 22.61 .9062c6 6.5 5.594 16.59-.8906 22.59l-208 192c-6.156 5.688-15.56 5.688-21.72 0l-208-192C-1.343 197.7-1.749 187.6 4.251 181.1z'/%3E%3C/svg%3E");

        &.dropdown-icon--inactive {
          $color: str-replace(#{color-neutral("background")}, "#");
          background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath fill='%23#{$color}' d='M4.251 181.1C7.392 177.7 11.69 175.1 16 175.1c3.891 0 7.781 1.406 10.86 4.25l197.1 181.1l197.1-181.1c6.5-6 16.64-5.625 22.61 .9062c6 6.5 5.594 16.59-.8906 22.59l-208 192c-6.156 5.688-15.56 5.688-21.72 0l-208-192C-1.343 197.7-1.749 187.6 4.251 181.1z'/%3E%3C/svg%3E");
        }

        &.dropdown-icon--active {
          $color: str-replace(#{color-neutral("background")}, "#");
          background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512' transform='rotate(-180)'%3E%3Cpath fill='%23#{$color}' d='M4.251 181.1C7.392 177.7 11.69 175.1 16 175.1c3.891 0 7.781 1.406 10.86 4.25l197.1 181.1l197.1-181.1c6.5-6 16.64-5.625 22.61 .9062c6 6.5 5.594 16.59-.8906 22.59l-208 192c-6.156 5.688-15.56 5.688-21.72 0l-208-192C-1.343 197.7-1.749 187.6 4.251 181.1z'/%3E%3C/svg%3E");
        }
      }

      &,
      .theme--normal & {
        //TODO: find ud af hvordan du kan sætte fill color igennem themes, husk også at rette i radiobuttons og checkboxes
        $color: str-replace(#{color-neutral("foreground")}, "#");
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath fill='%23#{$color}' d='M4.251 181.1C7.392 177.7 11.69 175.1 16 175.1c3.891 0 7.781 1.406 10.86 4.25l197.1 181.1l197.1-181.1c6.5-6 16.64-5.625 22.61 .9062c6 6.5 5.594 16.59-.8906 22.59l-208 192c-6.156 5.688-15.56 5.688-21.72 0l-208-192C-1.343 197.7-1.749 187.6 4.251 181.1z'/%3E%3C/svg%3E");

        &:not([disabled]):hover {
          background-color: color("interactive-hover");
        }

        &:not([disabled]):active {
          box-shadow: $shadow-style-back color("shadow");
          outline: none;
        }

        &.dropdown-icon--inactive {
          $color: str-replace(#{color-neutral("foreground")}, "#");
          background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath fill='%23#{$color}' d='M4.251 181.1C7.392 177.7 11.69 175.1 16 175.1c3.891 0 7.781 1.406 10.86 4.25l197.1 181.1l197.1-181.1c6.5-6 16.64-5.625 22.61 .9062c6 6.5 5.594 16.59-.8906 22.59l-208 192c-6.156 5.688-15.56 5.688-21.72 0l-208-192C-1.343 197.7-1.749 187.6 4.251 181.1z'/%3E%3C/svg%3E");
        }

        &.dropdown-icon--active {
          $color: str-replace(#{color-neutral("foreground")}, "#");
          background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512' transform='rotate(-180)'%3E%3Cpath fill='%23#{$color}' d='M4.251 181.1C7.392 177.7 11.69 175.1 16 175.1c3.891 0 7.781 1.406 10.86 4.25l197.1 181.1l197.1-181.1c6.5-6 16.64-5.625 22.61 .9062c6 6.5 5.594 16.59-.8906 22.59l-208 192c-6.156 5.688-15.56 5.688-21.72 0l-208-192C-1.343 197.7-1.749 187.6 4.251 181.1z'/%3E%3C/svg%3E");
        }
      }
    }


    &--radio-checkbox-dimmed {
      input {

        &[type="checkbox"]:checked,
        &[type="radio"]:checked {
          background-color: color("interactive");

          &::before {
            background-color: color("foreground");
          }

          &:not([disabled]):hover {
            background-color: color("interactive-hover");
          }
        }
      }
    }

    &__file-upload {
      position: relative;
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: spacing(-1);
      width: 100%;
      max-width: $line-width-max;
      border: $width-border solid color("border");
      background-color: color("background-input");
      margin-top: spacing($forms-margin-label);

      input[type="file"] {
        top: 0;
        left: 0;
        position: absolute;
        //make default button invisible, but still the size of the entire field by setting the width to zero with 100% padding
        width: 0;
        overflow: hidden;
        padding-left: 100%;
        height: 100%;
        z-index: $z-index-just-above-static;

        &:focus {
          z-index: $z-index-just-above-static;
          outline: $outline-width solid color("utility-focus");
          outline-offset: $outline-offset + $width-border;
        }
      }

      &__button {
        @include set-colors("interactive");
        @include set-font(0, "single");
        padding: spacing($button-padding-vertical) spacing($button-padding-horizontal);
        box-shadow: $shadow-style-center color("shadow");

        @include icon-style {
          @include set-icon("upload");
          margin-right: spacing(-5);
        }

        .form__field__file-upload--dropzone & {
          visibility: hidden;
        }

        .form__field__file-upload--processing input[disabled]+& {
          color: transparent;
          @include processing-animation("foreground");
        }

        .form__field__file-upload input:not([disabled]):hover+& {
          background-color: color("interactive-hover");
        }

        .form__field__file-upload input:not([disabled]):active+& {
          box-shadow: $shadow-style-back color("shadow");
        }
      }

      &__dropzone-hint {
        display: none;
        align-items: center;
        justify-content: center;
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        color: color("theme-secondary-foreground-secondary");
        background-color: color("theme-secondary");

        .form__field__file-upload--dropzone & {
          display: flex;
        }
      }
    }

    &__file-list {
      //reset default ul
      margin: 0;

      margin-top: spacing($forms-margin-label);
      display: grid;
      row-gap: $width-border;
      width: 100%;
      max-width: $line-width-max;

      &__item {
        //reset default li
        padding: 0;
        margin: 0;

        &::before {
          content: none;
        }

        display: grid;
        grid-template-columns: 1fr auto;
        column-gap: $width-border;
        align-items: stretch;
        line-height: line-height("single");

        &__name {
          @include content-container;
          padding: spacing($forms-file-list-vertical-padding) spacing(-2);
          @include set-colors("background-secondary", $rewrite-css-vars: true);

          &:focus-within {
            outline: $outline-width solid color("utility-focus");
            outline-offset: $outline-offset;
            z-index: $z-index-just-above-static;
          }

          a.a--text-link {
            outline: none;
          }
        }

        &__remove {
          display: flex;
          width: spacing($forms-file-list-vertical-padding, $times: 2, $add: line-height("single", $include-calc: false));
          padding-top: spacing($forms-file-list-vertical-padding);
          overflow: hidden;
          background-color: color("background-secondary");
          white-space: nowrap;

          &:hover {
            background-color: color("background-secondary-hover");
          }

          &:focus-visible {
            outline: $outline-width solid color("utility-focus");
            outline-offset: $outline-offset;
            z-index: $z-index-just-above-static;
          }

          @include icon-style {
            @include set-icon("delete");
            flex: 0 0 100%;
          }
        }
      }
    }

    &__shadow-input {
      position: relative;
      max-width: $line-width-max;
      width: 100%;
      margin-top: spacing($forms-margin-label);

      & #{$forms-character-input-types} {
        margin-top: 0;
        background-color: transparent;
        position: relative;
        z-index: $z-index-just-above-static;

        &:focus {
          &+.form__field__shadow-input__content .form__field__shadow-input__postfix {
            color: color("foreground-secondary");
          }
        }
      }

      &__content {
        position: absolute;
        display: block;
        background-color: color("background-input");
        top: 0;
        left: 0;
        border: $width-border solid transparent;
        line-height: line-height("single");
        padding: spacing($forms-padding-vertical) spacing($forms-padding-horizontal);
        width: 100%;
        white-space: nowrap;
        overflow: hidden;
      }

      &__input {
        color: color("background-input");
      }
    }

    &__character-count {
      //character count design largely inspired by https://design-system.service.gov.uk/components/character-count/

      width: 100%;
      max-width: $line-width-max;

      textarea {
        display: block;
        max-width: $line-width-max;
      }

      textarea:focus+&,
      input:focus+& {
        &__info {
          visibility: visible;
        }
      }

      &__info {
        display: flex;
        justify-content: end;
        visibility: hidden;
        position: relative;
        width: 100%;
        @include set-font(-1, "single", $max-width: "default");
        color: color("foreground-secondary");
        padding-top: spacing($forms-margin-label);
        padding-bottom: spacing($forms-margin-label);
        margin-bottom: spacing($forms-margin-label, $times: -2, $subtract: line-height("single", $include-calc: false));

        &__overflow-message {
          display: none;
        }

        &__overflow-count {
          display: none;
          font-weight: $font-weight-bold;
        }

        &__count-down {
          display: inline-block;
          position: relative;
          background-color: color("background");

          &::before {
            content: "";
            position: absolute;
            z-index: $z-index-just-above-static;
            top: 0;
            bottom: spacing(-3, $times: -1);
            left: spacing(-3, $times: -1);
            width: spacing(-3);
            background-image: linear-gradient(to left, color("background"), var(--transparent-background));
          }

          &::after {
            content: "";
            position: absolute;
            z-index: $z-index-just-above-static;
            left: 0;
            right: 0;
            bottom: spacing(-3, $times: -1);
            height: spacing(-3);
            background-image: linear-gradient(to bottom, color("background"), var(--transparent-background));
          }
        }
      }

      &--overflow {
        .form__field__character-count__info {
          display: block; //overwrite the default display: flex;
          visibility: visible;
          margin-bottom: 0;
          width: fit-content;
          padding-left: spacing(-4);
          padding-right: spacing(-4);

          &__overflow-message,
          &__overflow-count {
            display: inline-block;
          }

          &__count-down {
            display: none;
          }
        }

        .form-info--error & {
          .form__field__character-count__info {
            &__overflow-message {
              display: none;
            }

            &__overflow-count {
              font-weight: $font-weight-normal;
            }
          }
        }

        &[data-recommended-length] {

          textarea,
          input {
            border-color: color("utility-attention");
          }

          .form__field__character-count__info {
            @include set-colors("utility-attention-background");
          }
        }

        &[data-allowed-length] {

          textarea,
          input {
            border-color: color("utility-warning");
          }

          .form__field__character-count__info {
            @include set-colors("utility-warning-background");
          }
        }
      }
    }

    &__textarea-autoexpand {
      //largly inspired by https://codepen.io/shshaw/pen/bGNJJBE
      width: 100%;
      max-width: $line-width-max;
      display: grid;
      grid-template-areas: "textarea";
      justify-items: stretch;

      textarea,
      &::before {
        grid-area: textarea; //by placing the textarea on the same grid-area as the pseudo element, the textarea will expand to the same height as the pseudo element
        width: 100%;
        max-height: spacing($forms-padding-vertical, $add: line-height("multiple", $include-calc: false, $times: $form-textarea-max-height-lines), $subtract: $width-border * -2);
      }

      &::before {
        content: attr(data-value) ' '; //javascript will set the data-value attribute to the value of the textarea
        visibility: hidden;
        white-space: pre-wrap;
        word-break: break-word;
        @include set-font(0, "multiple", $max-width: "default");
        margin-top: spacing($forms-margin-label);
        padding: spacing($forms-padding-vertical) spacing($forms-padding-horizontal);
        border: color("border") $width-border solid;
      }
    }

    &__combo-box {
      position: relative; //for positioning of options-list and expand icon
      width: 100%;
      max-width: $line-width-max;

      input[type="text"] {
        background-repeat: no-repeat;
        background-position: spacing($forms-padding-horizontal) center;
        background-size: font-size(0) auto;
        padding-left: spacing($forms-padding-horizontal, $add: "#{font-size(0)} + #{spacing($forms-select-icon-spacing)}");

        .theme--dark &,
        .theme--normal .theme--dark & {
          $color: str-replace(#{color-neutral("background")}, "#");
          background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath fill='%23#{$color}' d='M4.251 181.1C7.392 177.7 11.69 175.1 16 175.1c3.891 0 7.781 1.406 10.86 4.25l197.1 181.1l197.1-181.1c6.5-6 16.64-5.625 22.61 .9062c6 6.5 5.594 16.59-.8906 22.59l-208 192c-6.156 5.688-15.56 5.688-21.72 0l-208-192C-1.343 197.7-1.749 187.6 4.251 181.1z'/%3E%3C/svg%3E");

          &.dropdown-icon--inactive {
            $color: str-replace(#{color-neutral("background")}, "#");
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath fill='%23#{$color}' d='M4.251 181.1C7.392 177.7 11.69 175.1 16 175.1c3.891 0 7.781 1.406 10.86 4.25l197.1 181.1l197.1-181.1c6.5-6 16.64-5.625 22.61 .9062c6 6.5 5.594 16.59-.8906 22.59l-208 192c-6.156 5.688-15.56 5.688-21.72 0l-208-192C-1.343 197.7-1.749 187.6 4.251 181.1z'/%3E%3C/svg%3E");
          }

          &.dropdown-icon--active {
            $color: str-replace(#{color-neutral("background")}, "#");
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512' transform='rotate(-180)'%3E%3Cpath fill='%23#{$color}' d='M4.251 181.1C7.392 177.7 11.69 175.1 16 175.1c3.891 0 7.781 1.406 10.86 4.25l197.1 181.1l197.1-181.1c6.5-6 16.64-5.625 22.61 .9062c6 6.5 5.594 16.59-.8906 22.59l-208 192c-6.156 5.688-15.56 5.688-21.72 0l-208-192C-1.343 197.7-1.749 187.6 4.251 181.1z'/%3E%3C/svg%3E");
          }
        }

        &,
        .theme--normal & {
          //TODO: find ud af hvordan du kan sætte fill color igennem themes, husk også at rette i radiobuttons og checkboxes
          $color: str-replace(#{color-neutral("foreground")}, "#");
          background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath fill='%23#{$color}' d='M4.251 181.1C7.392 177.7 11.69 175.1 16 175.1c3.891 0 7.781 1.406 10.86 4.25l197.1 181.1l197.1-181.1c6.5-6 16.64-5.625 22.61 .9062c6 6.5 5.594 16.59-.8906 22.59l-208 192c-6.156 5.688-15.56 5.688-21.72 0l-208-192C-1.343 197.7-1.749 187.6 4.251 181.1z'/%3E%3C/svg%3E");

          &.dropdown-icon--inactive {
            $color: str-replace(#{color-neutral("foreground")}, "#");
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath fill='%23#{$color}' d='M4.251 181.1C7.392 177.7 11.69 175.1 16 175.1c3.891 0 7.781 1.406 10.86 4.25l197.1 181.1l197.1-181.1c6.5-6 16.64-5.625 22.61 .9062c6 6.5 5.594 16.59-.8906 22.59l-208 192c-6.156 5.688-15.56 5.688-21.72 0l-208-192C-1.343 197.7-1.749 187.6 4.251 181.1z'/%3E%3C/svg%3E");
          }

          &.dropdown-icon--active {
            $color: str-replace(#{color-neutral("foreground")}, "#");
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512' transform='rotate(-180)'%3E%3Cpath fill='%23#{$color}' d='M4.251 181.1C7.392 177.7 11.69 175.1 16 175.1c3.891 0 7.781 1.406 10.86 4.25l197.1 181.1l197.1-181.1c6.5-6 16.64-5.625 22.61 .9062c6 6.5 5.594 16.59-.8906 22.59l-208 192c-6.156 5.688-15.56 5.688-21.72 0l-208-192C-1.343 197.7-1.749 187.6 4.251 181.1z'/%3E%3C/svg%3E");
          }
        }
      }

      &__options {
        position: absolute;
        z-index: $z-index-pop-over;
        background-color: color("background");
        box-shadow: $shadow-style-front color("shadow");
        margin: 0;
        padding: 0;
        width: 100%;
        max-width: spacing($forms-select-icon-spacing, $times: -1, $add: $line-width-max, $subtract: "#{font-size(0)} + #{$width-border}");
        margin-left: spacing($forms-select-icon-spacing, $add: "#{font-size(0)} + #{$width-border}");
        overflow-y: auto;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
        $max-visible-options: 5.5;
        max-height: spacing($forms-combo-box-vertical-padding, $times: 2 * $max-visible-options, $add: "#{line-height("single", $times: $max-visible-options, $include-calc: false)} + #{$width-border-slim * $max-visible-options}");
      }

      &__option {
        //reset default li style
        margin: 0;

        &::before {
          content: none;
        }

        @include set-font(0, "single");
        padding: spacing($forms-combo-box-vertical-padding) spacing($forms-padding-horizontal);
        border-bottom: $width-border-slim solid color("border");

        &:last-child {
          border-bottom: 0;
        }

        &:hover {
          background-color: color("background-hover");
        }

        &[aria-selected="true"] {
          @include set-colors("background-secondary");
          outline: none;
        }

        &--no-results {
          color: color("foreground-secondary");

          &:hover {
            background-color: transparent;
          }
        }
      }
    }

    &--inline-label {
      &:not(.form__field--horizontal) {
        position: relative; //for positioning of validation error
        flex-direction: row;
        align-items: center;
        max-width: $line-width-max;
        border: $width-border solid color("border");
        background-color: color("background-input");

        &:focus-within {
          outline: $outline-width solid color("utility-focus");
          outline-offset: $outline-offset;
        }

        & #{$forms-character-input-types} {
          border: none;
          background-color: transparent;
          margin-top: 0;
          padding-left: spacing($form-inline-label-spacing);

          &:focus {
            outline: none;
          }
        }

        //remove the arrow on a disabled select via a more specific selector
        &.visually-disabled {
          select[disabled] {
            background-image: none;
          }
        }

        & select {
          margin-top: 0;
          background-image: none;
          background-color: transparent;
          border-left: spacing($form-inline-label-spacing) solid transparent; //border makes sure, that when the left-padding gets set by JS to the width of the label, there will be the intened gap between label and the value of the select
          text-align: right; //before JS has run the text aligns to the right to avoid conflict with label
          z-index: $z-index-just-above-static; //make the select sit on top of the label show that when clicking the label, the select is actually clicked and hence opened, not just focused

          --label-width: 6rem; //will be updated by JS
          padding-left: var(--label-width);



          &[style^="--label-width"] {
            text-align: left;
          }

          &:focus {
            outline: none;
          }

          .theme--dark &,
          .theme--normal & {
            &:not([disabled]) {

              &:hover,
              &:active {
                background-color: transparent;
              }
            }
          }
        }

        & label {
          flex-direction: row; //prevent ::after from showing on second line
          @include set-font(0, "single");
          padding: spacing($forms-padding-vertical) 0 spacing($forms-padding-vertical) spacing(-3);
          color: color("foreground");
          background-color: transparent;
          white-space: nowrap;
          flex: 0 0 auto;

          &::after {
            content: ":";
          }

          & .form-info__hint {
            display: none;
          }

          & .form-info__message {
            position: absolute;
            left: $width-border * -1;
            top: calc(#{line-height("single", $times: -1, $include-calc: false)} - #{$width-border});
            margin-top: 0;
            @include set-font(-1, "single");
            padding-top: 0;
            padding-bottom: 0;
            padding-right: spacing(-4);

            &::before {
              padding: 0;
              margin-top: 0;
              margin-bottom: 0;
              width: line-height("single");
              margin-right: spacing(-4);
            }
          }
        }
      }

      &--select:not(.form__field--horizontal) {
        background-color: color("interactive");
        border: none;

        &:hover {
          background-color: color("interactive-hover");
        }

        label {
          position: absolute;
          top: 0;
          left: 0%;
          background-color: transparent;
          padding-left: spacing($forms-padding-horizontal);
          border: $width-border solid transparent;
          border-right: none;
          $color: str-replace(#{color-neutral("foreground")}, "#");

          @include icon-style {
            @include set-icon("expand");
            margin-right: spacing($forms-select-icon-spacing);
          }
        }
      }
    }
  }

  fieldset {
    border: none;
    padding: 0;
    margin: 0 0 spacing($forms-margin-field) 0;

    legend {
      margin-bottom: spacing($forms-margin-fieldset);
    }

    .form__field {
      margin-bottom: spacing($forms-margin-fieldset);

      &:last-of-type {
        margin-bottom: 0;
      }
    }

    &.fieldset--not-radio-checkbox {
      legend {
        margin-bottom: 0;

        .form-info__hint {
          margin-bottom: spacing($forms-margin-label);

          &+.form-info__message {
            margin-top: 0;
          }
        }

        .form-info__message {
          margin-bottom: spacing($forms-margin-label);
        }
      }

      label {
        color: color("foreground-secondary");
        @include set-font(-1, "single");
      }

      .form__field {
        margin-bottom: spacing($forms-margin-fieldset-vertical);
      }
    }

    & .fieldset__horizontal-wrapper {
      display: flex;
      flex-direction: row;
      align-items: flex-start;
      max-width: $line-width-max;

      & .form__field {
        margin-bottom: 0;
        max-width: none;
        flex-grow: 1;
        flex-shrink: 1;
        flex-basis: spacing($forms-padding-horizontal, $times: 2, $add: $width-border * 2);
        margin-right: spacing($forms-margin-fieldset);

        &:last-of-type {
          margin-right: 0;
        }

        @for $i from 1 through 12 {
          &--width-relative-#{$i} {
            flex-grow: $i;
          }
        }

        @for $i from 1 through 12 {
          &--width-fixed-#{$i} {
            flex-grow: 0;
            flex-shrink: 0;
            flex-basis: spacing($forms-padding-horizontal, $times: 2, $add: "#{$width-border * 2} + #{$i * .9em}");
          }
        }
      }
    }

    &.fieldset--section {

      &--hide-header {
        .fieldset__section-header {
          @include screenreader-only;
        }
      }

      &+fieldset,
      &+.form__field {
        margin-top: spacing($forms-margin-field + 1);
      }

      .form__field {
        margin-bottom: spacing($forms-margin-field);

        &:last-child {
          margin-bottom: 0;
        }
      }

      .fieldset__section-header {
        display: flex;
        align-items: end;
        max-width: $line-width-max;
        margin-bottom: spacing($forms-margin-fieldset);

        &__title {
          flex: 1 1 auto;
          @include set-font(1, "single", $weight: "bold");
          margin-bottom: 0;
        }

        button {
          flex: 0 0 auto;
        }
      }
    }
  }

  &__field+.fieldset--section,
  fieldset+.fieldset--section {
    margin-top: spacing($forms-margin-field + 1);
  }

  &__inline-submit {
    position: relative; //for positioning of submit button
    max-width: $line-width-max;

    &__button {
      @include screenreader-only;
      position: absolute;
      right: spacing(-4, $add: $width-border);
      bottom: spacing($forms-padding-vertical);

      appearance: none;
      border: none;
      @include set-colors("theme");
      @include set-font(-1, "single");
      box-shadow: $shadow-style-front color("shadow");
      padding: spacing(-5) spacing(-4);

      &:focus {
        @include screenreader-only($unset: true, $position: "absolute");
        outline: $outline-width solid color("utility-focus");
        outline-offset: $outline-offset;
      }
    }
  }

  .submit {
    margin-top: spacing($forms-margin-submit);
    display: flex;
  }

  //for iOS that by default make disabled element and their text semi transperent
  input:not([type="submit"]),
  textarea,
  select {
    &[disabled] {
      opacity: 1;
      -webkit-text-fill-color: color("foreground");
    }
  }

  input[type="submit"][disabled] {
    opacity: 1;
  }

  &-info {

    &--error {
      &> {

        select,
        textarea,
        input[type="radio"],
        input[type="checkbox"],
        .form__field__file-upload,
        .form__field__shadow-input input,
        .form__field__combo-box input,
        #{$forms-character-input-types} {
          border-color: color("utility-warning");
        }

        input[type="radio"],
        input[type="checkbox"] {
          border-style: solid;
          border-width: $width-border;
        }
      }

      &.form__field--inline-label,
      & .form__field--inline-label {
        border-color: color("utility-warning");
      }

      & .form-info__message {
        display: inline-flex;
        @include set-colors("utility-warning-background");

        &::before {
          @include set-icon("warning-triangle");
          background-color: color("utility-warning");
        }
      }

      &.form__field--inline-label {
        label {
          border-color: color("utility-warning");
        }
      }
    }

    &--confirmed {
      & .form-info__message {
        display: inline-flex;
        @include set-colors("utility-confirm-background");

        &::before {
          @include set-icon("confirm-circle");
          background-color: color("utility-confirm");
        }
      }
    }

    &__hint {
      color: color("foreground-secondary");
      @include set-font(-1, "single", $max-width: "default");
    }

    &__message {
      display: none; //message only to be shown when .form-field has a modifier class
      @include set-font(0, "single", $max-width: "default");
      margin-top: spacing($forms-margin-label);
      padding: spacing(-5) spacing(-3) spacing(-5) 0;

      @include icon-style {
        margin-right: spacing(-3);
        margin-top: spacing(-5, $times: -1);
        margin-bottom: spacing(-5, $times: -1);
        padding: spacing(-5);
        width: spacing(-5, $times: 2, $add: #{line-height("single", $include-calc: false)});
        text-align: center;
      }
    }
  }
}


//visually disabled styles
.form__field.visually-disabled,
fieldset.visually-disabled {

  label,
  legend,
  .form-info__hint,
  .form-info__message,
  &.fieldset--not-radio-checkbox .form__field label {
    color: color("foreground-disabled");
  }

  .form-info__message {
    display: inline-flex;
    background-color: color("background-secondary");

    &::before {
      @include set-icon("info-circle");
      margin-right: 0;
    }
  }

  &.form__field--inline-label,
  & .form__field--inline-label {
    background-color: color("background-secondary");
    border-color: transparent;

    label {
      color: color("foreground-disabled")
    }

    #{$forms-character-input-types},
    select {
      &[disabled] {
        background-color: transparent;
      }
    }
  }

  textarea,
  #{$forms-character-input-types} {
    &[disabled] {
      color: color("foreground-disabled");
      border-color: transparent;
      background-color: color("background-secondary");
    }
  }

  //for iOS
  input:not([type="submit"]),
  textarea,
  select {
    &[disabled] {
      -webkit-text-fill-color: color("foreground-disabled");
    }
  }


  select,
  input.form__field__combo-box__field {
    &[disabled] {
      box-shadow: none;
      background-color: color("background-secondary");
      color: color("foreground-disabled");
      //TODO: find ud af hvordan du kan sætte fill color igennem themes, husk også at rette i radiobuttons og checkboxes
      $color: str-replace(#{color-neutral("foreground-disabled")}, "#");
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath fill='%23#{$color}' d='M4.251 181.1C7.392 177.7 11.69 175.1 16 175.1c3.891 0 7.781 1.406 10.86 4.25l197.1 181.1l197.1-181.1c6.5-6 16.64-5.625 22.61 .9062c6 6.5 5.594 16.59-.8906 22.59l-208 192c-6.156 5.688-15.56 5.688-21.72 0l-208-192C-1.343 197.7-1.749 187.6 4.251 181.1z'/%3E%3C/svg%3E");
    }
  }

  input[type="checkbox"],
  input[type="radio"] {
    &[disabled] {
      box-shadow: none;
      background-color: color("background-secondary");
      color: color("foreground-disabled");

      &:checked {
        background-color: color("background-secondary");
      }
    }
  }

  input[type="checkbox"]:checked {
    &[disabled] {
      &::before {
        background-color: color("foreground-disabled");
      }
    }
  }

  input[type="radio"]:checked {
    &[disabled] {
      &::before {
        background-color: color("foreground-disabled");
      }
    }
  }

  .form__field__file-upload {
    background-color: color("background-secondary");
    border-color: color("background-secondary");

    input[disabled]+.form__field__file-upload__button {
      background-color: color("background-secondary");
      color: color("foreground-disabled");
      box-shadow: none;
    }
  }

  .form__field__shadow-input {
    & #{$forms-character-input-types} {
      &[disabled] {
        background-color: transparent;
      }

      &+.form__field__shadow-input__content {
        background-color: color("background-secondary");

        .form__field__shadow-input__postfix {
          color: color("foreground-disabled");
        }
      }
    }
  }
}