@use '@cloud-ru/ds-figma-variables/build/scss/styles/styles.module' as base;
@use '@cloud-ru/ds-figma-variables/build/scss/components/toolbar.module' as toolbar;

.root {
  position: relative;
  width: 100%;
  min-width: base.$sn-primitive-dimension-96;
}

.focusFrame {
  pointer-events: none;

  position: absolute;
  z-index: 0;
  // В макете рамка рисуется внутрь поля (`focusedFrame/regular/inside`, stroke INSIDE),
  // поэтому нулевой inset, а не отрицательный.
  inset: 0;

  display: none;

  border: base.$sn-brand-anatomy-focusLine-control-strokeWeight solid base.$sn-theme-color-available-complementary;
  border-radius: toolbar.$sn-toolbar-anatomy-container-tool-search-borderRadius;
}

.search {
  position: relative;
  z-index: 1;
  width: 100%;
}

.root:not([data-loading='true'])[data-focusvisible='true'] {
  .focusFrame {
    display: block;
  }
}