// Copyright 2025 Signal Messenger, LLC
// SPDX-License-Identifier: AGPL-3.0-only

@use '../../mixins';
@use '../../variables';

$icon-image-size: 20px;
$icon-actual-size: 18px;
$icon-margin-inline-start: 12px;
$clear-padding-inline: 6px;
$clear-button-size: 20px;
$clear-icon-size: 16px;
$input-padding-inline: 12px;

.FunSearch__Container {
  position: relative;
  width: 100%;
}

.FunSearch__Icon {
  position: absolute;
  width: $icon-image-size;
  height: $icon-image-size;
  top: 50%;
  transform: translateY(-50%);
  inset-inline-start: $icon-margin-inline-start;
  pointer-events: none;

  @include mixins.color-svg(
    '../images/icons/v3/search/search.svg',
    light-dark(variables.$color-black-alpha-50, variables.$color-white-alpha-50)
  );
}

.FunSearch__Input {
  appearance: none;
  width: 100%;
  border-radius: 8px;
  border: none;
  padding-block: 6px;
  padding-inline-end: $input-padding-inline;
  padding-inline-start: calc(
    $input-padding-inline + $icon-actual-size + $icon-margin-inline-start
  );
  @include mixins.font-body-1;
  background: light-dark(variables.$color-gray-05, variables.$color-gray-80);

  &:focus {
    outline: none;
    @include mixins.keyboard-mode {
      outline: 2px solid variables.$color-ultramarine;
    }
  }
}

.FunSearch__Clear {
  @include mixins.button-reset();
  & {
    position: absolute;
    display: flex;
    align-items: center;
    inset-block: 0;
    inset-inline-end: 0;
    padding-inline: $clear-padding-inline;
  }
  &:focus {
    // Handled by .FunSearch__ClearButton
    outline: none;
  }
}

.FunSearch__ClearButton {
  display: flex;
  align-items: center;
  justify-content: center;
  width: $clear-button-size;
  height: $clear-button-size;
  border-radius: 9999px;
  color: light-dark(
    variables.$color-black-alpha-50,
    variables.$color-white-alpha-50
  );

  .FunSearch__Clear:hover &,
  .FunSearch__Clear:focus & {
    color: light-dark(variables.$color-gray-75, variables.$color-gray-25);
  }

  .FunSearch__Clear:focus & {
    @include mixins.keyboard-mode {
      outline: 2px solid variables.$color-ultramarine;
    }
  }

  &::before {
    content: '';
    display: block;
    width: $clear-icon-size;
    height: $clear-icon-size;
    @include mixins.color-svg('../images/icons/v3/x/x.svg', currentColor);
  }
}