// ------------------------------------\
// FORMS
// ------------------------------------/

// Remove input-styles from iOS
@use "sass:math";

input {
  &[type='text'],
  &[type='email'],
  &[type='password'] {
    -webkit-appearance: none;
  }
}

// input and text area
input,
textarea {
  &::placeholder {
    overflow: visible;
    color: $grey !important;
    opacity: 1 !important;
    -webkit-font-smoothing: $default-font-smoothing;
  }

  &:focus {
    box-shadow: none !important;

    &::placeholder {
      color: transparent !important;
    }

    // prefix-appender doesn't handle firefox properly here, need to specify explicitly
    &::-moz-placeholder {
      color: transparent !important;
    }
  }
}

textarea {
  -webkit-appearance: none;

  &::placeholder {
    @include a-fontSize16;
  }
}

// Form group
.form-inline {
  .a-form-group {
    padding-right: $spacer;
  }
}

.a-form-group,
.form-group {
  position: relative;

  label,
  div {
    &.inactive {
      cursor: not-allowed;
      opacity: 0.3;
    }
  }

  // Form group items (Container for Label and Input)
  .a-form-group-items,
  .input-group {
    // sass-lint:disable-block no-important
    position: relative !important;

    input,
    button,
    .input-group-prepend {
      background-color: transparent;
    }

    &.inactive {
      opacity: 0.3;
    }
  }

  // Label
  .a-form-label-inline {
    @extend label;
    @include a-fontMedium;
    display: inline-block;
    margin-right: $spacer * 0.5;
  }

  .a-form-label {
    @extend .a-fontSizeXS;
    @include a-fontMedium;
    display: block;
    margin-bottom: $spacer * 0.5;
  }

  // Input
  .form-control {
    @include a-fontSize16;
    @include a-fontReg;
    min-width: 0; // Need to set this to prevent Firefox from adding a default min-width to input fields
    min-height: $spacer * 3;
    padding: 2px $spacer 0 $spacer;
    margin-left: math.div(-$spacer, 12);
    color: $black !important;
    letter-spacing: $font-letter-spacing;
    border: 2px solid $blue;
    border-radius: 0;
    transition: none;

    &:focus {
      border: 2px solid $blue-dark;
    }

    &.inactive {
      border-color: $black;
    }
  }

  // Button right to input
  .input-group-append {
    position: relative;
    border: 2px solid $blue;
    border-left: none;

    &.a-icon-right {
      @include a-fontSize16;
    }

    &.a-noBorder-right {
      border-right: none;
   }

    .btn {
      min-width: $spacer * 4;
      height: 100%;
      padding: 0;
      padding-right: 6px;
      color: $black;
      text-align: right;
      cursor: pointer;
      border: none;
      transition: none;

      &.inactive {
        cursor: no-drop;
      }

      &:hover,
      &:active,
      &:focus {
        background: $blue-light;
        outline: none;
      }
    }

    .a-dropdownArrow {
      margin-top: 2px;
      margin-right: 0;
      margin-bottom: 0;
      vertical-align: text-top;
      border-right: none;
      border-left-color: $black;
      transform: scale( 0.75 ) rotate( 90deg );

      &.a-expanded,
      .a-expanded & {
        transform: scale( 0.75 ) rotate( -90deg );
      }
    }
  }

  // Form group with LARGE input field
  &.a-form-group-large {
    .form-control {
      @include media-breakpoint-up( md ) {
        @include a-fontSize24;
        min-height: $spacer * 5;
        padding: 2px $spacer 0 $spacer * 1.5;
      }
    }

    .input-group-prepend {
      @include media-breakpoint-up( md ) {
        @include a-fontSize20;
        padding: 18px $spacer;
      }
    }
  }

  // VALIDATOR: Show help message if error
  .a-message {
    display: none;
    margin-top: $spacer;

    &.field-validation-error {
      display: inline-block;
    }
  }

  .a-message-absolute {
    position: absolute;
    top: $spacer * 5;
  }

  // VALIDATOR: Input has error
  &.has-error {
    // Label
    .input-group-prepend {
      // sass-lint:disable-block no-important
      border: 2px solid $red !important;
    }

    .input-group-append {
      // sass-lint:disable-block no-important
      border-color: $red !important;
    }

    // Input
    .form-control,
    .form-control-alt {
      // sass-lint:disable-block no-important
      border: 2px solid $red !important;

      &.a-hasButton {
        // sass-lint:disable-block no-important
        border-right: none !important;
      }

    }

    .input-group {
      .input-group-prepend {
        // sass-lint:disable-block no-important
        border-right: none !important;
      }

      .form-control {
        &.a-hasIcon {
          // sass-lint:disable-block no-important
          @include media-breakpoint-up( md ) {
            border-left: none !important;
          }
        }
      }


      // Focus state on label and input
      // JS: If state on input is "focus",
      // add class to input-group : "a-input-focus".
      // add dark red color on hover and focus
      // added setting background to white here, for input-fields that are transparent, but should be white when active.
      &:hover,
      &.a-input-focus {
        .input-group-prepend,
        .form-control,
        .input-group-append {
          // sass-lint:disable-block no-important
          background-color: $white;
          border-color: darken( $red, 15% ) !important;
          box-shadow: none !important;
        }

        .form-control {
          &.a-hasButton {
            // sass-lint:disable-block no-important
            border-right: none !important;
          }
        }

        .input-group-append {
          // sass-lint:disable-block no-important
          border-left: none !important;
        }
      }
    }
  }

  // INPUT GROUPS (Putting label inside of textarea)
  .input-group {

    // Label
    .input-group-prepend {
      @include a-fontSize16;
      @include a-fontReg;
      display: block;
      min-width: $spacer * 3;
      min-height: $spacer * 3;
      padding: 5px $spacer * 0.5 0 $spacer * 0.5;
      margin-bottom: 0;
      color: $black;
      text-align: left;
      background-color: transparent;
      border: 2px solid $blue;
      border-right: none;
      border-radius: 0;

      &.inactive {
        border-color: $black;
      }

      &.a-icon-right {
        border-right: 2px solid $blue;
        border-left: none;
      }
    }

    // input: Hide border left if there is a addon
    .form-control {
      flex-direction: row;

      &::-ms-reveal { //hide reveal in ie as this has a custom implementation
        width: 0;
        height: 0;
      }

      &.a-hasIcon {
        padding-left: $spacer * 0.5;
        border-left: 2px solid $blue;

        @include media-breakpoint-up( md ) {
          padding-left: 0;
          border-left: none;
        }
      }

      &.a-hasButton {
        border-right: none;
      }
    }

    // Validator message
    &+.a-message {
      margin-top: $spacer;
    }

    // Focus state on label and input
    // JS: If state on input is "focus",
    // add class to input-group : "a-input-focus".
    // added setting background to white here, for input-fields that are transparent, but should be white when active.
    &:hover,
    &.a-input-focus {
      .input-group-prepend,
      .form-control,
      .input-group-append {
        z-index: 4;
        background-color: $white;
        border-color: $blue-dark;
      }
    }

    // Disabled input
    &.disabled {
      .input-group-prepend,
      .form-control {
        color: $grey;
        background-color: $white;
        background-image: url($images-base-url + 'disabled-background.svg');

      }

      .input-group-prepend {
        border: 2px solid $grey-medium;
        border-right: none;
      }

      // Input
      .form-control {
        border: 2px solid $grey-medium;

        &.a-hasIcon {
          padding-left: $spacer * 0.5;
          border-left: 2px solid $grey-medium;

          @include media-breakpoint-up( md ) {
            padding-left: 0;
            border-left: none;
          }
        }
      }
    }

    // Inactive input
    &.inactive {
      .input-group-prepend,
      .form-control {
        color: $grey;
        background-color: $white;
      }

      .input-group-prepend {
        border: 2px solid $grey-medium;
        border-right: none;
      }

      // Input
      .form-control {
        border: 2px solid $grey-medium;

        &.a-hasIcon {
          padding-left: $spacer * 0.5;
          border-left: 2px solid $grey-medium;

          @include media-breakpoint-up( md ) {
            padding-left: 0;
            border-left: none;
          }
        }

        &.a-hasButton {
          border-right: none;
        }

      }

      .input-group-append {
        background-color: $white;
        border: 2px solid $grey-medium;
        border-left: none;
      }
    }
  }

  // Approved input
  .disabled {
    &.a-input-approved {
      .input-group-prepend,
      .form-control {
        // sass-lint:disable-block no-important
        color: $black !important;
        background-color: $green-lighten;
        background-image: url($images-base-url + 'approved-background.svg');
        border: none !important;
      }

      i {
        margin-top: 2px;
      }
    }
  }

  // Text area
  .a-textarea {
    @include a-fontSize16;
    min-height: $spacer * 11;
    padding: $spacer;
    border: 2px solid $blue;
    border-radius: 0;

    &:hover,
    &:focus {
      // sass-lint:disable-block no-important
      border: 2px solid $blue-dark;
      box-shadow: none !important;
      }
    }
  }


// FORM HELP TEXT / VALIDATOR INFO
.a-validatorInfo {
  @extend .a-fontSizeXXS;
  margin-top: $spacer;
  color: $black;
}

.a-validatorInfo-icon {
  margin-top: - $spacer * 0.25;
  color: $blue;
  vertical-align: middle;

  &.a-validatorInfo-icon-approved {
    color: $green;
  }
}

// FORM LEGEND
.a-legend {
  @include a-fontSize20;
  @include a-fontMedium;
  display: block;
  padding-right: $spacer * 2;
  margin-bottom: $spacer;
  color: $blue-darker;
}


// FORM CHECKBOXES (Bootstrap 4)

.a-custom-checkbox {
  padding-left: 3.5rem;
  margin-right: $spacer * 3;
  margin-bottom: $spacer;
  cursor: pointer;

  &:last-child {
    margin-right: 0;
    @include media-breakpoint-up( lg ) {
      margin-right: 0;
    }
  }

  .custom-control-label {
    cursor: pointer;

    &::before {
      // Indicator
      top: 2px;
      left: $spacer * -3;
      width: $spacer * 2;
      height: $spacer * 2;
      margin-top: -4px;
      pointer-events: inherit;
      background-color: $white;
      border: 2px solid $blue;
      border-radius: 0;
    }
  }

  &:focus,
  &:hover {
    .custom-control-label {
      &::before {
        border: 2px solid $blue-dark;
      }
    }
  }

  &.inactive {
    label {
      cursor: inherit;
    }

    .custom-control-label {
      &::before {
        border: 2px solid $grey-medium;
      }
    }
  }

  .custom-control-input {
    display: inline-block;
    padding-left: $spacer * 2;
    margin-bottom: $spacer;
    @include media-breakpoint-up( lg ) {
      display: inline-block;
      margin-right: $spacer * 3;
    }

    &:checked~.custom-control-label {
      &::before {
        background-color: $white;
      }

      &::after {
        top: 0;
        left: -28px;
        width: 0.7rem;
        height: 1.6rem;
        border: solid $black;
        border-width: 0 3px 5px 0;
        transform: rotate(45deg);
      }
    }

    &:focus~.custom-control-label {
      &::before {
        border: 2px solid $blue-darker;
        box-shadow: none;
      }
    }
  }
}

.a-form-checkboxes {
  &.a-form-checkboxes--discret {
    @include a-fontSize14;

    .custom-control-label {
      &::before {
        // Indicator
        width: $spacer * 1.5;
        height: $spacer * 1.5;
        margin-top: -3px;
        pointer-events: inherit;
        border: 2px solid $blue-darker;
      }
    }

    .custom-control-input {
      &:checked~.custom-control-label {
        &::after {
          top: 2px;
          left: -30px;
          width: 0.6rem;
          height: 1.3rem;
          border-width: 0 2px 4px 0;
        }
      }
    }
  }

  &.a-search-multiple-actor-select-subunit {
    margin-left: 30px;
  }
}

// FORM RADIOBUTTONS (Bootstrap 4)
.a-custom-radio {
  padding-bottom: math.div($spacer, 3);
  padding-left: $spacer * 3;
  margin-right: $spacer * 2;
  margin-bottom: $spacer;
  cursor: pointer;

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

  .custom-control-label {
    cursor: pointer;

    &::before {
      top: math.div($spacer, 12) * -1;
      left: $spacer * -3;
      width: $spacer * 2;
      height: $spacer * 2;
      pointer-events: inherit;
      background-color: $white;
      border: math.div($spacer, 6) solid $blue;
    }
  }

  &:hover {
    .custom-control-label {
      &::before {
        background: $white;
        border: math.div($spacer, 6) solid $blue-darker;
      }
    }
  }

  .a-radioButtons-title {
    @extend .a-fontSizeS;
  }

  .custom-control-input {
    cursor: pointer;

    &:checked~.custom-control-label {
      &::before {
        background-color: $white;
        border: 2px solid $blue-darker;
      }

      &::after {
        top: 1px;
        left: -34px;
        width: 2rem;
        height: 2rem;
        background-image: url('data:image/gif;base64,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');
      }
    }

    &:focus~.custom-control-label {
      &::before {
        border: 2px solid $blue-darker;
        box-shadow: none;
        outline: 6px solid $blue-opacity;
      }
    }
  }
}

.a-custom-radio+.a-custom-radio {
  margin-left: 0;
}

// RADIOBUTTONS WITH EXCERPT
.a-radioButtons-stackedList {
  display: block;

  .a-radioButtons-excerpt {
    @include a-fontSize16;
    display: block;
    padding-top: $spacer;
  }
}

.a-radioButtons-searchResult {
  .custom-radio {
    &:hover,
    &:focus,
    &:active {
      .a-radioButtons-excerpt {
        color: $grey-medium;
      }
    }

    .a-radioButtons-title {
      color: $grey-medium;

      strong {
        color: $black;
      }
    }

    .a-radioButtons-excerpt {
      color: $grey-medium;
    }
  }

  .custom-control {
    >input {
      &:checked~.a-radioButtons-excerpt {
        color: $black;
      }
    }
  }
}

.a-js-radioParentGray {
  background-color: $grey-light;
}

// Postal code
.a-input-postnumber {
  max-width: 100px;
}

// country code
.a-input-countryCode {
  max-width: 55px;
  padding-right: 0 !important;
  border-right-color: $grey-medium !important;
  border-right-width: 1px;
}

// phone number with country code
.a-input-phonenumber {
  border-left: none !important;
}

.a-input-placecode {
  position: absolute;
  top: $spacer * 3;
  right: -45px;

  &::before {
    content: 'Oslo';
  }
}

.a-js-place {
  display: inline;
}

// FORM SWITCH BUTTONS
.a-switch {
  position: relative;
  display: inline-block;
  max-width: 100%;
  margin-right: $spacer * 0.5;
  margin-bottom: $spacer;
  cursor: pointer;

  input {
    &[type='checkbox'],
    &[type='radio'] {
      &+label {
        &.focused {
          box-shadow: none;
        }

        &.disabled {
          cursor: not-allowed;
        }
      }

      &[data-toggle='popover'] {
        height: 40px;
        margin-left: 25px;
      }

      &:not(:checked) {
        &+label {
          border: 2px dotted $blue;
          border-radius: $spacer * 3;
          transition: border 0.2s, background-color 0.2s;

          &.disabled {
            padding: 8px 18px;
            background-color: $white;
            background-image: url($images-base-url + 'disabled-background.svg');
            border: none;
          }

          &.a-toggle-icon {
            i {
              color: $blue;

              &:nth-of-type(1) {
                display: inline-block;
              }

              &:nth-of-type(2) {
                display: none;
              }
            }
          }
        }
      }

      &:checked {
        &+label {
          background-color: $blue-opacity;
          border: 2px solid $blue;
          border-radius: $spacer * 3;
          transition: border 0.2s, background-color 0.2s;

          &.a-toggle-icon {
            i {
              color: $blue;

              &:nth-of-type(1) {
                display: none;
              }

              &:nth-of-type(2) {
                display: inline-block;
              }
            }
          }

          &.disabled {
            background-color: transparent;
            border: 2px solid $black;
          }
        }

        &:focus {
          &+label {
            background: $blue-light-opacity-09;
          }
        }
      }

      &:focus,
      &:active {
        &+label {
          border-style: solid;
        }
      }
    }
  }

  .a-switch-label {
    @extend .a-fontSizeXS;
    @include a-fontReg;
    max-width: 100%;
    min-height: $spacer * 3;
    padding: 5px $spacer 0 $spacer;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: middle;
    cursor: pointer;

    &.a-inactive {
      cursor: default;
    }
  }

  &.a-switch-limitedWidth {
    max-width: calc(100% - 30px);
  }

  &.a-switch--small {
    .a-switch-label {
      @include a-fontSize14;
      min-height: 24px;
      padding: 2px 12px 0 12px;

      &::before {
        position: absolute;
        top: -5px;
        left: 0;
        z-index: 1;
        // width: calc( 100% + 24px );
        // Is this necessary?
        min-height: 36px;
        cursor: pointer;
        content: '';
      }
    }
  }
}


// Dropdown
.a-form-text {
  padding: 7px 50px 5px 6px;
}

// Toggle btn
.a-dropdown-toggle {
  width: 100%;
  min-height: $spacer * 3;
  padding: 0;
  text-align: left;
  white-space: normal;
  cursor: pointer;
  background-color: $white;
  border: 2px solid $blue;
  border-radius: 0;

  &:hover {
    color: $black;
    border-color: $blue-dark;
  }

  &:focus {
    border-color: $blue-dark;
  }

  &::after {
    position: absolute;
    top: 16px;
    right: $spacer;
  }

  &::before {
    // Making the touch target area bigger without affecting the layout
    position: absolute;
    top: $spacer * 0.5 * -1;
    left: 0;
    width: 100%;
    height: $spacer * 4;
    content: '';
  }
}

.dropdown {
  i {
    margin-left: $spacer * 0.5;
  }

  &.a-transparent {
    .a-dropdown-toggle {
      background-color: transparent;
    }
  }
}

// TODO: merge with .a-dropdown-toggle with & revert selector? .a-dropdown-toggle { .open & {...} }
.show {
  &.a-transparent {
    .a-dropdown-toggle {
      background-color: $white;
    }
  }
}

// Choises
.a-dropdown-menu {
  @include a-fontSize16;
  width: 100%;
  max-height: 300px;
  padding: 0 $spacer * 2 0 $spacer * 2;
  margin-top: -2px;
  margin-bottom: -2px;
  overflow-y: auto;
  border: 2px solid $blue-dark;
  border-radius: 0;
}

.a-dropdown-menu-direction-down {
  // sass-lint:disable-block no-important
  transform: translate3d(0, 36px, 0) !important;
}

.a-dropdown-item {
  position: relative;
  min-height: $spacer * 3;
  padding: $spacer * 0.5 0 0 0;
  white-space: normal;
  border-bottom: 2px dotted $blue;

  &:hover,
  &:focus {
    // sass-lint:disable-block no-important
    background-color: $blue-light;
    border-bottom: 2px dotted $blue-dark;
    box-shadow: none !important;
  }

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

.a-dropdown-item-active {
  // sass-lint:disable-block no-important
  background-color: $grey-light;
  border-bottom: 2px dotted $blue-dark;
  box-shadow: none !important;

  &:hover {
    background-color: $grey-light;
  }
}

// SELECT MENU
.a-custom-select {
  height: $spacer * 3;
  padding: 0 $spacer * 3 0 $spacer;
  color: $black;
  cursor: pointer;
  background: $white url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+Cjxzdmcgd2lkdGg9IjhweCIgaGVpZ2h0PSI0cHgiIHZpZXdCb3g9IjAgMCA4IDQiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+CiAgICA8IS0tIEdlbmVyYXRvcjogU2tldGNoIDQwLjIgKDMzODI2KSAtIGh0dHA6Ly93d3cuYm9oZW1pYW5jb2RpbmcuY29tL3NrZXRjaCAtLT4KICAgIDx0aXRsZT5UcmlhbmdsZTwvdGl0bGU+CiAgICA8ZGVzYz5DcmVhdGVkIHdpdGggU2tldGNoLjwvZGVzYz4KICAgIDxkZWZzPjwvZGVmcz4KICAgIDxnIGlkPSJQYWdlLTEiIHN0cm9rZT0ibm9uZSIgc3Ryb2tlLXdpZHRoPSIxIiBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPgogICAgICAgIDxwb2x5Z29uIGlkPSJUcmlhbmdsZSIgZmlsbD0iIzAwMDAwMCIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoNC4wMDAwMDAsIDIuMDAwMDAwKSBzY2FsZSgxLCAtMSkgdHJhbnNsYXRlKC00LjAwMDAwMCwgLTIuMDAwMDAwKSAiIHBvaW50cz0iNCAwIDggNCAwIDQiPjwvcG9seWdvbj4KICAgIDwvZz4KPC9zdmc+') no-repeat right 0.75rem center;

  border: 2px solid $blue;
  border-radius: 0;

  &:hover {
    background-color: $white;
    border: 2px solid $blue-dark;
  }

  &:focus {
    // sass-lint:disable-block no-important
    border: 2px solid $blue-dark;
    box-shadow: none !important;
  }
}

.a-custom-fileupload {

  &.a-custom-fileupload--focused {
    background: $blue-light;
  }
}

// Overriding the non-accesible styling
// Bootstrap applies to custom controls
.custom-control-input {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: none;
  opacity: 0.1;
}