@use 'libs/components/theme/src/lib/styles/mixins' as mixins;
@use 'libs/components/theme/src/lib/styles/variables' as *;
@use 'libs/components/theme/src/lib/styles/compat-tokens-mixins' as compatMixins;

@include compatMixins.sky-default-overrides('.sky-input-box') {
  --sky-override-button-width: 33px;
  --sky-override-input-box-error-margin-top: 5px;
  --sky-override-input-box-hint-margin-top: var(--sky-margin-stacked-xs);
  --sky-override-input-box-select-border-radius: 0;
}

@include compatMixins.sky-modern-overrides('.sky-input-box', false) {
  --sky-override-button-width: 55px;
  --sky-override-input-box-character-count-font-size: var(
    --sky-font-size-body-m
  );
  --sky-override-input-box-character-count-padding: 3px 0 0;
  --sky-override-input-box-color-border-base: var(--modern-color-gray-15);
  --sky-override-input-box-no-label-space-top: var(--modern-space-s);
  --sky-override-input-box-select-space: 10px;
  --sky-override-input-focus-elevation-shadow: var(--modern-shadow-size-1);
  --sky-override-input-margin-top: -23px;
  --sky-override-input-padding-top: 26px;
  --sky-override-label-padding-bottom: 1px;
  --sky-override-textarea-border-top: 29px;
  --sky-override-textarea-margin-top: -26px;
}

@include compatMixins.sky-modern-overrides('sky-input-box', false) {
  --sky-override-background-color-input-box: var(--modern-color-white);
}

// default theme initial input box background colors (also set by ag-grid and search)
sky-input-box {
  --sky-background-color-input-box-group: transparent;
  --sky-background-color-input-box-group-focused: transparent;
}

.sky-input-box {
  --sky-input-box-button-width: var(
    --sky-override-button-width,
    var(--sky-input-box-height)
  );
}

// modern theme initial input box background colors with overrides (also set by ag-grid and search)
.sky-theme-modern {
  sky-input-box {
    --sky-background-color-input-box-group: var(
      --sky-override-background-color-input-box,
      var(--sky-color-background-input-base)
    );
    --sky-background-color-input-box-group-focused: var(
      --sky-override-background-color-input-box,
      var(--sky-color-background-input-base)
    );
  }
}

sky-input-box {
  display: block;

  // default and modern; spacing for the old way of displaying errors
  .sky-error-indicator {
    margin-top: var(
      --sky-override-input-box-error-margin-top,
      var(--sky-space-gap-stacked_supplemental-s)
    );
  }

  // default and modern; display properties and background color
  .sky-form-group {
    display: flex;
    flex-wrap: wrap;
    background-color: var(--sky-background-color-input-box-group);

    &:focus-within {
      background-color: var(--sky-background-color-input-box-group-focused);
    }

    .sky-input-box-label-wrapper {
      display: flex;
      width: 100%;
    }

    // The global select styles add a border radius to select elements. This ensures it is not visible when the field is disabled within an input box.
    select.sky-form-control {
      border-radius: var(
        --sky-override-input-box-select-border-radius,
        var(--sky-border-radius-s)
      );
    }
  }

  // default; visual input styling
  .sky-input-box-input-group-inner {
    display: flex;
    background-color: #fff;
    width: 100%;
    z-index: 1;

    &:not(.sky-field-status-active):not(.sky-field-status-invalid) {
      @include mixins.sky-border(dark, top, bottom, left, right);
    }
  }

  // default; inset button styling (search, phone field search dismiss)
  .sky-input-box-btn-inset {
    .sky-btn {
      background-color: transparent;
      border: none;
    }
  }

  // default and modern
  .sky-input-box-icon-inset-wrapper,
  .sky-input-box-icon-inset-left-wrapper {
    display: flex;

    .sky-input-group-icon {
      width: var(--sky-input-box-button-width);
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }

  // default; disabled inset button background colors/colors
  .sky-input-box-disabled {
    .sky-input-box-icon-inset-wrapper,
    .sky-input-box-icon-inset-left-wrapper {
      background-color: $sky-background-color-disabled;

      .sky-icon {
        color: $sky-text-color-deemphasized;
      }
    }
  }

  // default and modern, except margin bottom
  sky-character-counter-indicator {
    text-align: right;
    margin-bottom: $sky-margin-half;
    margin-left: auto;
  }

  // default and modern
  .sky-control-label + sky-character-counter-indicator {
    flex-shrink: 0.001;
  }

  // default and modern
  .sky-form-control,
  .sky-form-control:focus {
    border: none;
    flex-basis: 100%;

    &:focus,
    &.ng-invalid.ng-touched {
      border: none;
      box-shadow: none;
    }
  }

  // default
  .sky-input-box-icon-inset-left-wrapper {
    .sky-input-box-icon-inset-left {
      padding: 0 0 0 $sky-space-md;
      width: initial;
    }
  }

  // default and modern
  .sky-input-box-hint-text {
    flex-basis: 100%;
    margin-top: var(
      --sky-override-input-box-hint-margin-top,
      var(--sky-space-gap-stacked_supplemental-s)
    );
    text-align: left;

    &.sky-input-box-hint-text-hidden {
      visibility: hidden;
    }
  }
}

.sky-theme-modern {
  /* Styles applied to both enabled and disabled input boxes */
  .sky-input-box {
    // calculate the size of the input top spacing (padding or border). (label line height * label font size) + label padding top + label padding bottom.
    --sky-input-box-space-top: calc(
      calc(
          var(--sky-font-line_height-input-label) *
            var(--sky-font-size-input-label)
        ) + var(--sky-space-inset-input_label-top-m) +
        var(--sky-space-inset-input_label-bottom-m)
    );
    // calculate the size of the input top margin. -1 * the padding.
    --sky-input-box-margin-top: calc(var(--sky-input-box-space-top) * -1);

    // calculate the height of the input box. Input bottom padding + (input line height * input font size) + input top padding
    --sky-input-box-height: calc(
      var(--sky-space-inset-input-bottom-m) +
        calc(
          var(--sky-font-size-input-val) * var(--sky-font-line_height-input-val)
        ) + var(--sky-input-box-space-top)
    );

    .sky-input-box-group {
      display: flex;
    }

    .sky-input-box-group-form-control {
      flex-grow: 1;
      /*
        The combination of position: relative here and z-index on the focused form
        control allows the drop shadow on the focused input group to display above the
        input group buttons.
      */
      position: relative;

      &:first-child {
        .sky-form-group {
          border-top-left-radius: var(--sky-border-radius-s);
          border-bottom-left-radius: var(--sky-border-radius-s);
        }
      }

      &:last-child {
        .sky-form-group {
          border-top-right-radius: var(--sky-border-radius-s);
          border-bottom-right-radius: var(--sky-border-radius-s);
        }
      }
    }

    .sky-input-box-form-group-inner {
      display: flex;
      flex-grow: 1;
      flex-wrap: wrap;
    }

    .sky-input-group-btn {
      .sky-btn {
        border-radius: 0;
        color: var(--sky-color-text-deemphasized);
        margin: 0;
        padding: 0;
        position: relative;
        transition: $sky-form-border-and-color-transitions;
        width: var(--sky-input-box-button-width);

        .sky-icon {
          font-size: 24px;
        }
      }

      &:first-child {
        .sky-btn {
          border-top-left-radius: var(--sky-border-radius-s);
          border-bottom-left-radius: var(--sky-border-radius-s);
          // makes the borders between the button and input appear to be a single 1px border, while allowing both to have hover effect
          margin-right: calc(var(--sky-border-width-input-base) * -1);

          &:focus {
            z-index: 1;
          }
        }
      }

      &:last-child {
        .sky-btn {
          border-top-right-radius: var(--sky-border-radius-s);
          border-bottom-right-radius: var(--sky-border-radius-s);
        }
      }
    }

    .sky-input-group-icon {
      .sky-icon {
        color: var(--sky-color-text-deemphasized);
        font-size: 24px;
      }
    }

    .sky-input-box-group-form-control-focus:not(:last-child),
    .sky-input-box-group-form-control-invalid:not(:last-child),
    .sky-input-group-btn:focus-within:not(:last-child) {
      z-index: 1;
    }

    .sky-input-box-group-form-control-focus:not(:active)
      + .sky-input-group-btn {
      .sky-btn {
        // makes the borders between the input and button appear to be a single 1px border, while allowing both to have hover effect
        margin-left: calc(var(--sky-border-width-input-focus) * -1);
      }
    }

    .sky-input-box-group-form-control:active + .sky-input-group-btn {
      .sky-btn {
        // makes the borders between the input and button appear to be a single 1px border, while allowing both to have hover effect
        margin-left: calc(var(--sky-border-width-input-active) * -1);
      }
    }

    .sky-input-box-group-form-control + .sky-input-group-btn {
      .sky-btn {
        // makes the borders between the input and button appear to be a single 1px border, while allowing both to have hover effect
        margin-left: calc(var(--sky-border-width-input-base) * -1);
      }
    }

    .sky-input-box-group-form-control + .sky-input-group-btn {
      .sky-btn {
        // makes the borders between the input and button appear to be a single 1px border, while allowing both to have hover effect
        margin-left: calc(var(--sky-border-width-input-base) * -1);
      }
    }

    .sky-input-group-btn + .sky-input-group-btn {
      .sky-btn {
        // makes the borders between two buttons appear to be a single 1px border, while allowing both to have hover effect
        margin-left: calc(var(--sky-border-width-input-base) * -1);
      }
    }

    .sky-form-group {
      color: var(--sky-color-text-deemphasized);
      flex-wrap: nowrap;
      margin-bottom: 0;
      padding: 0;

      .sky-input-box-label-wrapper {
        padding: 0 var(--sky-space-inset-input-right-m) 0
          var(--sky-space-inset-input-left-m);

        .sky-control-label,
        sky-character-counter-indicator {
          margin-bottom: 0;
          position: relative;
          /*
            The label elements should be above input elements so clicking on it will focus on the
            input element. It is important the user be able to click on the label rather
            than the input element's top padding, because clicking the label will place
            the cursor where the user last left it, while clicking the input's padding
            always places the cursor at the beginning of the text.
          */
          z-index: 2;
        }

        .sky-control-help {
          /*
          The help button should be above the input element to ensure it is clickable.
          Select inputs have a z-index of 3 so that clicking the label area still opens the select.
          */
          z-index: 4;
        }

        .sky-control-label {
          padding-top: var(--sky-space-inset-input_label-top-m);
          padding-bottom: var(
            --sky-override-label-padding-bottom,
            var(--sky-space-inset-input_label-bottom-m)
          );
          font-style: var(--sky-font-style-input-label);
          font-weight: var(--sky-font-weight-input-label);

          &:has(+ sky-character-counter-indicator) {
            margin-right: var(--sky-space-inset-input-right-m);
          }
        }

        .sky-control-label,
        .sky-character-count-label {
          font-size: var(--sky-font-size-input-label);
          letter-spacing: var(--sky-font-letter_spacing-input-label);
          line-height: var(--sky-font-line_height-input-label);
          display: inline-block;
        }

        .sky-control-help {
          margin: 3px 0 -3px var(--sky-space-gap-text_action-xs);

          &:not(:last-child) {
            margin-right: var(--sky-space-inset-input-right-m);
          }
        }

        sky-character-counter-indicator {
          margin-left: auto;
          padding: var(
            --sky-override-input-box-character-count-padding,
            var(--sky-space-inset-input_label-top-m) 0
              var(--sky-space-inset-input_label-bottom-m)
          );
          font-size: var(
            --sky-override-input-box-character-count-font-size,
            var(--sky-font-size-input-label)
          );
        }
      }

      .sky-form-control {
        margin-top: var(
          --sky-override-input-margin-top,
          var(--sky-input-box-margin-top)
        );
        padding-top: var(
          --sky-override-input-padding-top,
          var(--sky-input-box-space-top)
        );
      }

      .sky-form-control {
        background-color: transparent;
        border: none;
        border-radius: var(--sky-border-radius-s);
        font-size: var(--sky-font-size-input-val);
        /*
          Allow the height of the control to be determined by the line height instead of the
          browser's pre-defined height for the element. This is particularly important for the
          select element since its height is normally larger than desired for controls in
          an input box.
        */
        height: auto;
        line-height: var(--sky-font-line_height-input-val);
        padding-right: var(--sky-space-inset-input-right-m);
        padding-bottom: var(--sky-space-inset-input-bottom-m);
        padding-left: var(--sky-space-inset-input-left-m);
        position: relative;

        &:autofill,
        &:-webkit-autofill {
          box-shadow: none !important;
          clip-path: inset(
            var(--sky-input-box-input-border-width) round
              var(--sky-border-radius-s)
          ) !important;

          &:hover {
            clip-path: inset(
              var(--sky-input-box-input-border-width) round
                var(--sky-border-radius-s)
            ) !important;
          }
        }

        &:focus,
        &.ng-invalid {
          box-shadow: none;
          outline: none;
        }

        // Placeholder text
        &::-webkit-input-placeholder {
          font-size: var(--sky-font-size-input-val);
        }

        &::-moz-placeholder {
          /* Firefox 19+ */
          font-size: var(--sky-font-size-input-val);
        }

        &input:-moz-placeholder {
          /* Firefox 18- */
          font-size: var(--sky-font-size-input-val);
        }
      }

      // This style is needed to ensure that the autofill clip path is properly applied when the label is hovered.
      // Without it - the clip path will revert to 2px when the label is hovered instead of the correct hover clip path of 1px.
      .sky-input-box-label-wrapper:hover + .sky-form-control {
        &:autofill,
        &:-webkit-autofill {
          clip-path: inset(
            var(--sky-input-box-input-border-width) round
              var(--sky-border-radius-s)
          ) !important;
        }
      }

      .sky-input-group-btn.sky-input-box-btn-inset {
        .sky-btn {
          background-color: transparent;
          border-top-right-radius: var(--sky-border-radius-s);
          border-bottom-right-radius: var(--sky-border-radius-s);
          transition-property: none;

          &:not(:active):not(:focus):not(:hover) {
            box-shadow: none;
          }
        }
      }

      .sky-input-box-label-wrapper:empty + .sky-form-control,
      .sky-input-box-label-wrapper:empty + * .sky-form-control {
        margin-top: 0;

        &:not(textarea) {
          padding-top: var(
            --sky-override-input-box-no-label-space-top,
            var(--sky-space-inset-input-top-m)
          );
        }
      }

      .sky-input-box-label-wrapper:empty + textarea.sky-form-control,
      .sky-input-box-label-wrapper:empty + * textarea.sky-form-control {
        border-top: var(
            --sky-override-input-box-no-label-space-top,
            var(--sky-space-inset-input-top-m)
          )
          solid transparent;
      }

      select.sky-form-control {
        background-position-x: calc(
          100% - var(
              --sky-override-input-box-select-space,
              var(--sky-space-inset-input-left-m)
            )
        );
        /*
          Clicking on the label of a select element doesn't expand the select element;
          placing the select element above the label, in addition to the padding, effectively
          opens the select element when the label clicked.
        */
        z-index: 3;
      }

      textarea.sky-form-control {
        margin-top: var(
          --sky-override-textarea-margin-top,
          var(--sky-input-box-margin-top)
        );
        padding-top: 0;
        resize: vertical;
        border-top: var(
            --sky-override-textarea-border-top,
            var(--sky-input-box-space-top)
          )
          solid transparent;

        &:autofill,
        &:-webkit-autofill {
          border-top: var(
              --sky-override-textarea-border-top,
              var(--sky-input-box-space-top)
            )
            solid transparent !important;
        }
      }
    }

    .sky-input-box-icon-inset-left-wrapper {
      .sky-input-box-icon-inset-left {
        padding: 0 0 0 var(--sky-space-inset-input-left-m);
        width: initial;
      }
    }
  }

  // border styling for enabled inputs
  .sky-input-box:not(.sky-input-box-disabled) {
    // default border and background values for inputs and buttons
    --sky-input-box-input-border-color: var(
      --sky-override-input-box-color-border-base,
      var(--sky-color-border-input-base)
    );
    --sky-input-box-input-border-width: var(--sky-border-width-input-base);
    --sky-input-box-button-border-color: var(
      --sky-override-input-box-color-border-base,
      var(--sky-color-border-action-input-base)
    );
    --sky-input-box-button-border-width: var(--sky-border-width-action-base);
    --sky-input-box-button-background-color: var(
      --sky-override-background-color-input-box,
      var(--sky-color-background-action-input-base)
    );

    // apply input border
    .sky-input-box-group-form-control .sky-form-group {
      border: none;
      box-shadow: var(
        --sky-input-box-box-shadow-with-elevation,
        inset 0 0 0 var(--sky-input-box-input-border-width)
          var(--sky-input-box-input-border-color)
      );
    }

    // apply button border and background color
    .sky-input-group-btn .sky-btn {
      border: none;
      box-shadow: var(
        --sky-input-box-button-box-shadow-with-elevation,
        inset 0 0 0 var(--sky-input-box-button-border-width)
          var(--sky-input-box-button-border-color)
      );
      background-color: var(--sky-input-box-button-background-color);
    }

    // input border states
    .sky-input-box-group-form-control {
      &:hover {
        --sky-input-box-input-border-color: var(--sky-color-border-input-hover);
        --sky-input-box-input-border-width: var(--sky-border-width-input-hover);

        z-index: 1;
      }

      &:active {
        --sky-input-box-input-border-color: var(
          --sky-color-border-input-active
        );
        --sky-input-box-input-border-width: var(
          --sky-border-width-input-active
        );

        .sky-form-group {
          color: var(--sky-color-text-action);
        }
      }
    }

    // input focus state
    .sky-input-box-group-form-control-focus:not(:active),
    .sky-input-box-group-form-control-focus:not(
        :active
      ).sky-input-box-group-form-control-invalid {
      --sky-input-box-input-border-color: var(--sky-color-border-input-focus);
      --sky-input-box-input-border-width: var(--sky-border-width-input-focus);
      --sky-input-box-box-shadow-with-elevation: inset 0 0 0
          var(--sky-input-box-input-border-width)
          var(--sky-input-box-input-border-color),
        var(
          --sky-override-input-focus-elevation-shadow,
          var(--sky-elevation-focus)
        );

      z-index: 1;
      .sky-form-group {
        color: var(--sky-color-text-action);
      }
    }

    .sky-input-box-group-form-control-invalid {
      --sky-input-box-input-border-color: var(--sky-color-border-input-error);
      --sky-input-box-input-border-width: var(--sky-border-width-input-error);

      .sky-form-group {
        color: var(--sky-color-text-danger);
      }
    }

    // button border states
    .sky-input-group-btn .sky-btn {
      &:hover {
        --sky-input-box-button-border-color: var(
          --sky-color-border-action-input-hover
        );
        --sky-input-box-button-border-width: var(
          --sky-border-width-action-hover
        );
        --sky-input-box-button-background-color: var(
          --sky-override-background-color-input-box,
          var(--sky-color-background-action-input-hover)
        );

        z-index: 1;
      }

      &:active {
        --sky-input-box-button-border-color: var(
          --sky-color-border-action-input-active
        );
        --sky-input-box-button-border-width: var(
          --sky-border-width-action-active
        );
        --sky-input-box-button-background-color: var(
          --sky-override-background-color-input-box,
          var(--sky-color-background-action-input-active)
        );

        color: var(--sky-color-text-default);
        z-index: 2;
      }

      &:focus:not(:active) {
        --sky-input-box-button-border-color: var(
          --sky-color-border-action-input-focus
        );
        --sky-input-box-button-border-width: var(
          --sky-border-width-action-focus
        );
        --sky-input-box-button-background-color: var(
          --sky-override-background-color-input-box,
          var(--sky-color-background-action-input-focus)
        );
        --sky-input-box-button-box-shadow-with-elevation: inset 0 0 0
            var(--sky-input-box-button-border-width)
            var(--sky-input-box-button-border-color),
          var(
            --sky-override-input-focus-elevation-shadow,
            var(--sky-elevation-focus)
          );

        color: var(--sky-color-text-default);
        outline: none;
        z-index: 2;
      }
    }

    .sky-form-group {
      transition: $sky-form-border-and-color-transitions;

      .sky-control-label {
        transition: $sky-form-border-and-color-transitions;
      }
    }
  }

  // disabled styling
  .sky-input-box.sky-input-box-disabled {
    .sky-form-group {
      border: none;
      box-shadow: inset 0 0 0 var(--sky-border-width-input-disabled)
        var(
          --sky-override-input-box-color-border-base,
          var(--sky-color-border-input-disabled)
        );
    }

    .sky-input-group-btn .sky-btn {
      border: none;
      box-shadow: inset 0 0 0 var(--sky-border-width-action-disabled)
        var(
          --sky-override-input-box-color-border-base,
          var(--sky-color-border-action-input-disabled)
        );
      background-color: var(--sky-color-background-action-input-disabled);
    }

    .sky-form-control,
    .sky-control-label,
    .sky-input-group-btn {
      cursor: not-allowed;
    }

    .sky-input-box-icon-inset-wrapper,
    .sky-input-box-icon-inset-left-wrapper {
      background-color: transparent;
    }

    .sky-form-group,
    .sky-input-group-btn .sky-btn {
      background-color: var(--sky-color-background-input-disabled);
    }
  }
}
