@use "tokens" as *;

// Barra de los index (IndexToolbar.vue). El propio toolbar es el contenedor
// de las queries: por debajo de $bp-sm de ancho REAL de la barra, la búsqueda
// pasa a su fila y los toggles se reparten el ancho debajo.
.index-toolbar {
  container-type: inline-size;
  margin-bottom: $space-4;

  &__inner {
    display: flex;
    align-items: center;
    gap: $space-3;
  }

  &__search {
    position: relative;
    flex: 1;
    min-width: 0;
  }

  &__search-icon {
    position: absolute;
    left: $input-padding-x;
    top: 50%;
    transform: translateY(-50%);
    color: $text-3;
    pointer-events: none;
  }

  // Doble clase: gana al input[type="search"] genérico de _forms.scss
  // (0,1,1) sin depender del orden de carga — si no, el padding de la lupa
  // no se aplica y el texto se monta con el icono.
  &__search #{&}__search-input {
    width: 100%;
    height: $input-height;
    padding: 0 $input-padding-x 0 34px; // hueco a la izquierda para la lupa
    background: $input-bg;
    color: $input-text;
    border: 1px solid $input-border;
    border-radius: $input-radius;
    font-family: $k-font-sans;
    font-size: $fs-14;
    transition: border-color 0.15s, box-shadow 0.15s;

    &::placeholder { color: $input-placeholder; }
    &:hover:not(:focus) { border-color: $input-border-hover; }
    &:focus {
      outline: none;
      border-color: $input-border-focus;
      box-shadow: $input-focus-ring;
    }
  }

  &__actions {
    display: flex;
    align-items: center;
    gap: $space-3;
    flex-shrink: 0;
  }

  // Estrecho: la búsqueda ocupa su fila; debajo, los toggles se reparten
  // el ancho proporcionalmente.
  @container (max-width: #{$bp-sm - 1px}) {
    &__inner { flex-wrap: wrap; }
    &__search { flex: 1 1 100%; }
    &__actions {
      flex: 1 1 100%;
      > * { flex: 1 1 auto; }
    }
  }
}