@use './tokens' as kt;

@include kt.block {
  &__search {
    --kt-table-form-action-fr: 6fr;
    --kt-table-form-action-min-width: 180px;
    --kt-table-form-content-fr: 18fr;
    --kt-table-form-content-span: 18;
    --kt-table-form-item-span: 4;
    --kt-table-form-tablet-columns: 2;

    flex-shrink: 0;
    padding: 12px 16px 0;
    background: hsl(var(--card));
  }

  &__search-content-shell {
    overflow: hidden;
  }

  &__search-content-shell--transitioning {
    transition: height 0.22s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: height;
  }

  &__search-content-motion {
    min-height: 0;
    overflow: hidden;
  }

  &__search-content {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
  }

  &__search-form {
    min-width: 0;
  }

  &__search-actions {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
  }

  &__search-action-stack {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
  }

  &__search-toggle {
    padding-inline: 8px;
  }

  &__search-toggle-icon {
    width: 16px;
    height: 16px;
    transition: transform 0.2s ease;
  }

  &__search-toggle-icon--expanded {
    transform: rotate(180deg);
  }

  &__search-split {
    height: 1px;
    margin-top: 12px;
    background: hsl(var(--border));
  }

  &__form-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
  }

  &__form-item {
    min-width: 0;
    padding-bottom: 0;
  }

  &__form-control {
    width: 100%;
  }
}
