@use 'libs/components/theme/src/lib/styles/mixins' as defaultMixins;
@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-search-container') {
  --sky-override-search-applied-background-color: #fff;
  --sky-override-search-applied-border: #{2px solid $sky-highlight-color-success};
  --sky-override-search-applied-box-shadow: none;
  --sky-override-search-applied-color: #{$sky-highlight-color-success};
  --sky-override-search-applied-mobile-button-horizontal-padding: 11px;
  --sky-override-search-applied-mobile-button-vertical-padding: 5px;
  --sky-override-search-clear-padding-right: 6px;
  --sky-override-search-container-padding: #{$sky-padding-half};
  --sky-override-search-mobile-background-color: #{$sky-color-white};
  --sky-override-search-mobile-button-horizontal-padding: 12px;
  --sky-override-search-mobile-button-vertical-padding: 6px;
  --sky-override-search-mobile-font-size: #{$sky-font-size-base};
}

@include compatMixins.sky-modern-overrides('.sky-search-container', false) {
  --sky-override-input-icon-size: 17.3333px;
  --sky-override-search-applied-background-color: var(
    --sky-color-background-action-secondary-base
  );
  --sky-override-search-applied-color: #{$sky-highlight-color-success};
  --sky-override-search-applied-mobile-button-horizontal-padding: 15px;
  --sky-override-search-applied-mobile-button-vertical-padding: 9px;
  --sky-override-search-appied-border-width: 2px;
  --sky-override-search-background-color: var(--modern-color-transparent);
  --sky-override-search-button-height-width: 40px;
  --sky-override-search-mobile-button-horizontal-padding: 15px;
  --sky-override-search-mobile-button-vertical-padding: 9px;
}

sky-search {
  // only rendered in default
  .sky-search-btn-apply {
    padding-left: 6px;
  }

  .sky-search-btn-clear {
    padding-right: var(--sky-override-search-clear-padding-right);
  }

  // Search input (.sky-form-control) has z-index 2.
  // This ensures the button's focus border won't get clipped by input.
  .sky-search-input-container {
    .sky-input-group-btn > button:focus {
      z-index: 3;
    }
  }

  /**
   * Mobile styles
   */
  @include defaultMixins.sky-host-responsive-container-xs-min(false) {
    .sky-search-input-container {
      min-width: auto;
    }
  }

  @include defaultMixins.sky-host-responsive-container-sm-min(false) {
    .sky-search-input-container {
      min-width: 300px;
    }
  }

  /**
   * On iOS, the input will zoom when focused,
   * setting the font-size prevents this.
   *
   * Not using the reactive mixins due to this being a bug based on actual screen size
   */
  @media (max-width: $sky-screen-xs-max) {
    .sky-search-input,
    .sky-search-btn-apply,
    .sky-search-btn-clear {
      font-size: var(
        --sky-override-search-mobile-font-size,
        var(--sky-font-size-body-m)
      );
    }
  }

  .sky-btn.sky-search-btn-open {
    padding-top: var(
      --sky-override-search-mobile-button-vertical-padding,
      var(--sky-space-inset-pillarbox-1_2-top-m)
    );
    padding-bottom: var(
      --sky-override-search-mobile-button-vertical-padding,
      var(--sky-space-inset-pillarbox-1_2-bottom-m)
    );
    padding-left: var(
      --sky-override-search-mobile-button-horizontal-padding,
      var(--sky-space-inset-pillarbox-1_2-left-m)
    );
    padding-right: var(
      --sky-override-search-mobile-button-horizontal-padding,
      var(--sky-space-inset-pillarbox-1_2-right-m)
    );
  }

  .sky-search-btn-open-applied {
    &.sky-search-btn-open,
    &.sky-search-btn-open:hover {
      background-color: var(
        --sky-override-search-applied-background-color,
        var(--sky-color-background-selected-soft)
      );
      border: var(--sky-override-search-applied-border, none);
      box-shadow: var(
        --sky-override-search-applied-box-shadow,
        inset 0 0 0
          var(
            --sky-override-search-appied-border-width,
            var(--sky-border-width-selected-s)
          )
          var(
            --sky-override-search-applied-color,
            var(--sky-color-border-selected)
          )
      );
      color: var(
        --sky-override-search-applied-color,
        var(--sky-color-icon-action)
      );
      padding-top: var(
        --sky-override-search-applied-mobile-button-vertical-padding,
        var(--sky-space-inset-pillarbox-1_2-top-m)
      );
      padding-bottom: var(
        --sky-override-search-applied-mobile-button-vertical-padding,
        var(--sky-space-inset-pillarbox-1_2-bottom-m)
      );
      padding-left: var(
        --sky-override-search-applied-mobile-button-horizontal-padding,
        var(--sky-space-inset-pillarbox-1_2-left-m)
      );
      padding-right: var(
        --sky-override-search-applied-mobile-button-horizontal-padding,
        var(--sky-space-inset-pillarbox-1_2-right-m)
      );
    }
  }

  .sky-search-dismiss-container {
    display: flex;
  }

  .sky-search-item-dismiss {
    flex-shrink: 0;
    display: flex;

    > .sky-btn {
      border-color: transparent;
    }
  }

  .sky-search-item-input {
    flex-grow: 1;
    display: flex;
  }

  .sky-search-dismiss-absolute {
    align-items: center;
    position: absolute;
    background-color: var(
      --sky-override-search-mobile-background-color,
      var(--sky-color-background-action-secondary-base)
    );
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    padding: var(
      --sky-override-search-container-padding,
      var(--sky-space-inset-balanced-xs)
    );
  }
}

.sky-theme-modern {
  sky-search {
    sky-input-box {
      --sky-background-color-input-box-group: var(
        --sky-override-search-background-color,
        var(--sky-color-background-action-secondary-base)
      );
      --sky-background-color-input-box-group-focused: var(
        --sky-override-search-background-color,
        var(--sky-color-background-action-secondary-base)
      );
    }

    .sky-input-box .sky-input-group-btn .sky-btn.sky-search-btn {
      height: var(
        --sky-override-search-button-height-width,
        calc(
          calc(
              var(--sky-font-line_height-input-val) *
                var(--sky-font-size-input-val)
            ) + calc(var(--sky-space-inset-balanced-s) * 2)
        )
      );
      width: var(
        --sky-override-search-button-height-width,
        calc(
          calc(
              var(--sky-font-line_height-input-val) *
                var(--sky-font-size-input-val)
            ) + calc(var(--sky-space-inset-balanced-s) * 2)
        )
      );

      .sky-icon.sky-i-close {
        color: var(--sky-color-icon-default);
        font-size: inherit;
      }
    }

    .sky-search-btn-dismiss {
      color: var(--sky-color-icon-default);
      height: var(
        --sky-override-search-button-height-width,
        calc(
          calc(
              var(--sky-font-line_height-input-val) *
                var(--sky-font-size-input-val)
            ) + calc(var(--sky-space-inset-balanced-s) * 2)
        )
      );
      width: var(
        --sky-override-search-button-height-width,
        calc(
          calc(
              var(--sky-font-line_height-input-val) *
                var(--sky-font-size-input-val)
            ) + calc(var(--sky-space-inset-balanced-s) * 2)
        )
      );
      padding: 0;
    }

    .sky-search-container .sky-search-input-container {
      .sky-input-box-group
        .sky-input-box-group-form-control:not(
          .sky-input-box-group-form-control-focus,
          :hover
        )
        .sky-form-group {
        box-shadow: none;
      }

      &.sky-search-input-container-has-value {
        .sky-input-box-group-form-control:not(
            .sky-input-box-group-form-control-focus,
            :hover
          )
          .sky-form-group {
          border: none;
          border-radius: var(--sky-border-radius-0);
          box-shadow: inset 0 -1px 0 0 var(--sky-color-border-selected);
        }
      }

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

      .sky-input-group-icon {
        .sky-icon {
          font-size: var(
            --sky-override-input-icon-size,
            var(--sky-size-icon-s)
          );
          color: var(--sky-color-icon-default);
        }
      }

      .sky-input-box-group .sky-form-group {
        .sky-input-box-form-group-inner {
          input {
            width: auto;
            padding: var(--sky-space-inset-balanced-s)
              var(--sky-space-inset-balanced-s)
              var(--sky-space-inset-balanced-s) 0;
            margin: 0;

            &::placeholder {
              font-style: var(--sky-font-style-body-s);
              color: var(--sky-color-text-default);
              font-weight: var(--bb-font-weight-regular);
            }

            &:focus::placeholder {
              color: transparent;
            }
          }
        }
      }
    }
  }
}
