@use "sass:math";
@import "./variables/_variables.scss";

@function to-rem($size) {
  @return math.div($size, 16px) * 1rem;
}

/* GENERAL INPUT STYLES v0.1*/
#addressSelector {
  display: flex;
  flex-direction: column;
  font-family: $fontfamily-base;

  .row .col:has(input):not(:has(fieldset)) {
    margin-bottom: $base-gap * 10;
  }
  .row .col.checkAddressBtn,
  .row .col.plzSelectAddressBtn,
  .row .col:not(.plzSelectAddressBtn) > .btn-secondary {
    margin-top: $base-gap * 10;
  }

  .row .col fieldset.formInput:has(ul.groupInputList) {
    margin-bottom: 0;
  }
}

#addressSelector .topRow,
.topRow {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 $base-gap * 4 0 0;
  gap: $base-gap * 2;
  width: 100%;

  label.label,
  legend.label,
  label,
  legend {
    font-family: "TradeGothicNext", "TradeGothicNextSR", sans-serif;
    font-size: $input-label-font-size;
    font-weight: $fontweight-bold;
    line-height: $input-label-line-height;
    letter-spacing: $letter-spacing-xs;
    color: $bsr-black-90;
    margin-bottom: 0;

    .required {
      margin-inline-start: $base-gap;
    }

    &.labelFocused,
    .required {
      color: $bsr-black-90;
    }
  }

  .infoRow {
    display: flex;
    gap: $base-gap;
    position: relative;

    .info,
    .success {
      display: flex;
      height: 18px;
      position: relative;

      .tooltip {
        display: flex;
        visibility: hidden;
        position: absolute;
        max-width: 350px;
        width: max-content;
        padding: $base-gap * 4;
        align-items: center;
        gap: $base-gap * 4;
        align-self: stretch;
        bottom: 30px;
        left: -32px;
        border-radius: $base-gap;
        background: $bsr-white-100;
        box-shadow: $bsr-shadow-default;

        @media screen and (max-width: $screen-sm-max) {
            max-width: 90vw;
        }

        &::after {
          content: "";
          width: 20px;
          height: 20px;
          border-radius: $base-gap;
          background: $bsr-white-100;
          position: absolute;
          bottom: -10px;
          left: 30px;
          transform: rotate(45deg);
        }

        &.adjustRight {
          left: auto;
          right: -40px;

          &::after {
            content: "";
            bottom: -10px;
            right: 40px;
            left: initial;
          }
        }

        &:hover {
          visibility: visible;
        }

        &.bottom {
          bottom: initial;
          top: 35px;

          &::after {
            bottom: initial;
            top: -10px;
          }
        }
      }

      &:hover {
        .tooltip {
          display: flex;
          visibility: visible;
        }
      }
    }
  }
}

.input,
.select,
.textarea,
input,
select,
textarea {
  font-family: "TradeGothicNext", "TradeGothicNextSR", sans-serif;
  font-size: $inputField-font-size;
  font-weight: $fontweight-normal;
  line-height: $inputField-line-height;
  letter-spacing: $letter-spacing-xs;
  color: $bsr-black-90;
  background: $bsr-white-100;
  border: $bsr-border-width-m solid $bsr-grey-100;
  border-radius: $border-radius-sm;
  padding: ($base-gap * 2) ($base-gap * 4);
  gap: ($base-gap * 2);
  align-items: flex-start;
  align-self: stretch;

  &:focus,
  &:focus-visible,
  &:active {
    color: $bsr-black-90;
    border-color: currentColor;
    outline: $bsr-border-width-m solid currentColor;
  }

  &:disabled {
    color: $bsr-black-60;
  }
}

/* SELECT INPUT */
.select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg width='12' height='6' viewBox='0 0 12 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1.5 0.75L6 5.25L10.5 0.75' stroke='%231E1E1E' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
  background-position-x: calc(100% - #{$base-gap * 4});
  background-position-y: center;
  background-repeat: no-repeat;

  &:focus-visible {
    background-image: url("data:image/svg+xml,%3Csvg width='12' height='6' viewBox='0 0 12 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1.5 5.25L6 0.75L10.5 5.25' stroke='%231E1E1E' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
  }
}

/* TEXT INPUT */
.formInput, fieldset.formInput {
  display: flex;
  flex-direction: column;
  gap: ($base-gap * 2);
  margin-bottom: $base-gap * 5;
  font-family: "TradeGothicNext", "TradeGothicNextSR", sans-serif;

  ul {
    list-style-type: none;
    list-style: none;

    li {
      list-style-type: none;
      list-style: none;
    }
  }

  &.error {
    input, select, textarea {
      color: $error;
      border-color: transparent;
      outline: $bsr-border-width-l solid $bsr-border-color-error;
    }

    .errorMessage {
      color: $error;
      display: flex;
      align-items: center;
      font-size: $input-label-font-size;
      line-height: $input-label-line-height;

      .errorMessageIcon {
        align-self: flex-start;
        min-width: 18px;
        margin-inline-end: $base-gap * 2;
      }
    }
  }

  .helperText {
    color: $bsr-black-60;
    font-size: $input-label-font-size;
    line-height: $input-label-line-height;
  }

  [aria-disabled="true"] {
    input,
    label {
      color: $bsr-black-40;
      border-color: $bsr-black-40;
      pointer-events: none;
    }

    input {
      background: $bsr-black-10;
    }
  }
}

/* GROUP INPUT */
#addressSelector fieldset.formInput,
fieldset.formInput {
  ul.groupInputList {
    margin: 0;
    padding: 0;
    display: flex;
    gap: $base-gap * 2 $base-gap * 5;
    flex-wrap: wrap;
    column-gap: $base-gap * 10 !important;
    margin-bottom: 0;

    &.inline {
      display: inline-flex;
      gap: $base-gap * 2;
      flex-direction: row;
      flex-wrap: nowrap;
    }

    li {
      display: inline-flex;
      align-items: center;
      margin-right: 0 !important;
      gap: $base-gap * 2 !important;

      label {
        padding-left: 0 !important;
        display: inline-flex;
        align-items: center;
      }
      input[type="radio"] + label.label {
        padding-left: 0 !important;
        font-family: "TradeGothicNext", "TradeGothicNextSR", sans-serif;
        font-weight: 700 !important;
        font-size: to-rem(14px);
        margin-bottom: 0;
      }

      &::before {
        content: none !important;
      }
    }
  }
}

#addressSelector .row .col div.form-control.ariakit-combobox {
  padding: $base-gap * 2 0 $base-gap * 3 0 !important;

  input[role="combobox"] {
    padding-inline: $base-gap * 4 !important;
    width: 100% !important;
  }
}

/* RADIO INPUT */
input[type="radio"] {
  display: flex;
  width: 24px;
  height: 24px;
  padding: 4px;
  justify-content: center;
  align-items: center;
  border-radius: $border-radius;
  border: $bsr-border-width-m solid $bsr-black-90;

  height: $base-gap * 6;
  width: $base-gap * 6;
  position: relative;
  appearance: none;
  outline: 3.4px solid white;
  outline-offset: $bsr-border-width-m * -1 - 3px;

  &:hover,
  &:active,
  &:focus-visible,
  &:focus {
    cursor: pointer;
    background-color: $bsr-grey-100;
    border-width: 2px;
    outline: 2px solid white;
    outline-offset: -4px;
  }

  &:checked {
    background-color: $bsr-brick-100;
  }

  + label {
    font-weight: 400 !important;
    &:hover {
      cursor: pointer;
    }
  }

  .formInput.error & {
    border-color: $error;
    border-width: 2px;
    outline: 2px solid white;
    outline-offset: $bsr-border-width-m * -1 - 3px;
  }
}
button {
  text-underline-offset: 3px;
  gap: $base-gap * 3;
  justify-content: center;
  min-height: $base-gap * 10;
  p {
    margin: 0;
  }

  &.btn-white {
    background-color: $bsr-white-100;
    color: $bsr-brick-100;
    border-color: $bsr-brick-100;
    gap: $base-gap * 3;
    justify-content: center;
    min-height: $base-gap * 10;

    &:hover,
    &:focus-visible {
      background-color: $bsr-brick-100 !important;
      color: $bsr-white-100 !important;
      border-color: $bsr-brick-100 !important;
      text-decoration-color: currentColor;
    }
  }

  &.btn-brick {
    background-color: $bsr-brick-100;
    color: $bsr-white-100;
    border-color: $bsr-brick-100;
    gap: $base-gap * 3;
    justify-content: center;
    min-height: $base-gap * 10;
  }
  &.btn-orange {
    background-color: $bsr-orange-100;
    color: $bsr-white-100;
    border-color: $bsr-orange-100;
    gap: $base-gap * 3;
    justify-content: center;
    min-height: $base-gap * 10;
  }
  &.btn-decrement,
  &.btn-increment {
    &:hover {
      svg path {
        fill: $bsr-brick-100;
        stroke: $bsr-brick-100;
      }
    }
  }
}

button[type="submit"] {
  padding: $btn-padding-y $btn-padding-x;
  border-radius: $btn-border-radius;
  background-color: $bsr-brick-100;
  color: $bsr-white-100;
  border: $bsr-border-width-m solid $bsr-brick-100;

  &:hover,
  &:focus-visible {
    background-color: $bsr-white-100;
    color: $bsr-brick-100;
    text-decoration-color: currentColor;
  }

  &:focus,
  &:focus-visible {
    outline: none;
  }
}

form input[type="checkbox"]:read-only {
  background-color: #eee;
  border-color: #ddd;
  border-width: 2px;
}

form input[type="checkbox"],
form input[type="checkbox"] {
  height: 0;
  width: 0;
  position: absolute;
  opacity: 0;
}

form input[type="checkbox"] + label {
  padding-left: 0;
}

form input[type="checkbox"]:checked + label {
  color: #1e1e1e;
}

form input[type="checkbox"]:checked + label:before {
  border-color: #1e1e1e;
  background-color: #fff;
  background-image: url("data:image/svg+xml,%3Csvg width=%2716%27 height=%2712%27 viewBox=%270 0 16 12%27 fill=%27none%27 xmlns=%27http://www.w3.org/2000/svg%27%3E%3Cpath d=%27M5.75 11.6251C5.57 11.6251 5.38625 11.5613 5.24375 11.4263L0.743749 7.3013C0.439999 7.02005 0.417499 6.54755 0.698749 6.24005C0.979999 5.9363 1.4525 5.9138 1.76 6.19505L5.70875 9.8138L14.2025 0.611304C14.4837 0.307554 14.9562 0.288804 15.2637 0.570054C15.5675 0.851304 15.5862 1.3238 15.305 1.6313L6.305 11.3813C6.15875 11.5426 5.95625 11.6213 5.75375 11.6213L5.75 11.6251Z%27 fill=%27%23D74116%27 stroke=%27%23D74116%27 stroke-width=%270.4%27/%3E%3C/svg%3E%0A");
}

form input[type="checkbox"] + label:hover:before,
form input[type="checkbox"] + label:focus:before,
form input[type="checkbox"] + label:focus-within:before {
  border-width: 2px;
}

form input[type="checkbox"]:checked + label:hover:before {
  background-image: url("data:image/svg+xml,%3Csvg width=%2716%27 height=%2712%27 viewBox=%270 0 16 12%27 fill=%27none%27 xmlns=%27http://www.w3.org/2000/svg%27%3E%3Cpath d=%27M5.75 11.6251C5.57 11.6251 5.38625 11.5613 5.24375 11.4263L0.743749 7.3013C0.439999 7.02005 0.417499 6.54755 0.698749 6.24005C0.979999 5.9363 1.4525 5.9138 1.76 6.19505L5.70875 9.8138L14.2025 0.611304C14.4837 0.307554 14.9562 0.288804 15.2637 0.570054C15.5675 0.851304 15.5862 1.3238 15.305 1.6313L6.305 11.3813C6.15875 11.5426 5.95625 11.6213 5.75375 11.6213L5.75 11.6251Z%27 fill=%27%23D74116%27 stroke=%27%23D74116%27 stroke-width=%270.4%27/%3E%3C/svg%3E%0A");
}

form input[type="checkbox"] + label:before {
  content: "";
  position: relative;
  height: 24px;
  width: 24px;
  top: 0;
  margin-top: 0;
  transform: none;
  border-radius: 4px;
  border: 1.4px solid #1e1e1e;
  box-shadow: none;
  background-position: center;
  background-repeat: no-repeat;
  flex-shrink: 0;
  margin-bottom: -5px;
  margin-right: 8px;
  display: inline-block;
  cursor: pointer;
}

form input[type="checkbox"]:hover + label:before,
form input[type="checkbox"]:focus + label:before {
    box-shadow: 0 0 0 0.2rem rgba(255, 124.95, 38.25, 0.5);
}

/* TAG */
.tag {
  position: relative;
  color: $bsr-grey-100;
  display: inline-flex;
  align-items: center;
  gap: $base-gap * 4;
  transition: $transition-duration-base;
  border-radius: $border-radius-sm;
  border: $bsr-border-width-m solid $bsr-grey-100;
  background-color: $white;
  width: fit-content !important;
  border-radius: $border-radius-lg * 2;
  padding-inline: $base-gap * 3;
  padding-bottom: 5px;
  padding-top: 3px;
  min-height: fit-content;

  p {
    margin: 0;
  }

  .closeBtn {
    border: none;
    margin: 0;
    padding: 0;
    background-color: transparent;
    color: $text-secondary;
  }

  &:hover {
    cursor: pointer;
  }

  &:focus,
  &:focus-within {
    box-shadow: rgba($bsr-brick-100, 0.5) 0px 0px 0px 4px;
    &:is(button):not(.disabled) {
      outline: $base-gap solid $bsr-brick-100;
    }
  }

  &.selected {
    background-color: $secondary;
    color: $text-light;
    text-decoration: none;
    border: $bsr-border-width-m solid $secondary;
    &.selected {
      background-color: $secondary;
      color: $text-light;
      text-decoration: none;

      .closeBtn {
        color: $text-light;
      }
    }
    &:hover,
    &:focus {
      &:is(button):not(.disabled) {
        background-color: $secondary;

        .closeBtn {
          color: $text-light;
          background-color: transparent;
        }
      }

      &:focus,
      &:focus-visible {
        outline: none;
      }
    }
    &.disabled {
      background-color: $white;
      border-color: $bsr-black-40;
      color: $bsr-black-40;
      text-decoration: none;
      cursor: default;

      .closeBtn {
        color: $bsr-black-40;
        cursor: not-allowed;
      }

      &:hover,
      :focus {
        background-color: $secondary;
        cursor: pointer;
        color: $text-light;

        .btn {
          color: $text-light;
        }
      }
    }
  }
  &.isStatic {
    cursor: default;
  }
}

.selectGroup-events,
.event-picker {
  .location-picker-text {
    font-family: $fontfamily-base;
    font-size: $inputField-font-size;
    line-height: $inputField-line-height;
    color: $bsr-black-90;
    font-weight: $fontweight-normal;
  }
  legend {
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: $bsr-black-90;
    font-family: $fontfamily-heading;
  }
  .pi-info {
    display: flex;
    align-items: center;
  }
  .picker-list {
    gap: 0;
    padding-left: 0;

    li:before,
    li::marker {
      display: none;
      content: "";
    }
  }
}

fieldset legend {
  h2,
  h3,
  h4 {
    font-family: $fontfamily-base;
    color: $bsr-black-90 !important;
  }
}

fieldset.fieldsetLegend legend,
.pi-title {
  h2,
  h3,
  h4 {
    font-family: $fontfamily-base;
    font-size: $h3-fontsize;
    line-height: $h3-lineheight;
    font-weight: $fontweight-bold;
    color: $bsr-black-90;
  }
}

div.form-label {
  font-family: $fontfamily-base;
  font-size: $input-label-font-size;
  line-height: $input-label-line-height;
  color: $bsr-black-90;
  font-weight: $fontweight-bold;
}

fieldset.formInput:has(.topRow):has(input[type="checkbox"]):not(:has(input[name="agb"])):not(:has(input[name="datenschutz"])):not(:has(input[name="dfb"])) {
  display: flex;
  flex-direction: column;
  align-items: baseline;
  justify-content: start;
  gap: $base-gap * 4;
}
input[name="agb"] + label {
  font-family: $fontfamily-base;
  font-size: $inputField-font-size !important;
  line-height: $inputField-line-height !important;
  color: $bsr-black-90;
  font-weight: $fontweight-normal;
}
input.custom-control-input label.custom-control-label {
  column-gap: $base-gap;
}

.step-line {
  &.line-gray {
    background: $bsr-black-10;
  }
  &.line-brick {
    background: $bsr-brick-100;
  }
}

.pi-intro {
  h2,
  h3,
  h4 {
    font-family: $fontfamily-heading;
    font-size: $h3-fontsize;
    line-height: $h3-lineheight;
    font-weight: $fontweight-bold;
    color: $bsr-black-90;
  }
}