[data-fs-search-top] {
  // --------------------------------------------------------
  // Design Tokens for Search Top
  // --------------------------------------------------------

  // Default properties
  --fs-search-top-padding-top             : var(--fs-spacing-2);
  --fs-search-top-padding-right           : var(--fs-spacing-3);
  --fs-search-top-padding-bottom          : var(--fs-search-top-padding-top);
  --fs-search-top-padding-left            : var(--fs-search-top-padding-right);
  --fs-search-top-transition-property     : var(--fs-transition-property);
  --fs-search-top-transition-function     : var(--fs-transition-function);
  --fs-search-top-transition-timing       : var(--fs-transition-timing);

  // Header
  --fs-search-top-header-padding-top      : var(--fs-spacing-1);
  --fs-search-top-header-padding-bottom   : var(--fs-search-top-header-padding-top);

  // Title
  --fs-search-top-title-padding-top       : var(--fs-spacing-1);
  --fs-search-top-title-padding-bottom    : var(--fs-search-top-title-padding-top);
  --fs-search-top-title-size              : var(--fs-text-size-lead);
  --fs-search-top-title-line-height       : 1.5;

  // Item
  --fs-search-top-item-column-gap         : var(--fs-spacing-1);
  --fs-search-top-item-text-size          : var(--fs-text-size-2);
  --fs-search-top-item-line-height        : 1.25;
  --fs-search-top-item-bkg-color-hover    : var(--fs-color-tertiary-bkg-hover);

  // --------------------------------------------------------
  // Structural Styles
  // --------------------------------------------------------

  width: 100%;
  padding-top: var(--fs-search-top-padding-top);
  padding-bottom: var(--fs-search-top-padding-bottom);

  [data-fs-search-top-header] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: var(--fs-search-top-min-height);
    padding: var(--fs-search-top-header-padding-top) var(--fs-search-top-padding-right) var(--fs-search-top-header-padding-bottom) var(--fs-search-top-padding-left);
  }

  [data-fs-search-top-title] {
    width: 100%;
    font-size: var(--fs-search-top-title-size);
    line-height: var(--fs-search-top-title-line-height);
  }

  [data-fs-search-top-item] {
    display: flex;
    align-items: center;
    font-size: var(--fs-search-top-item-text-size);
    line-height: var(--fs-search-top-item-line-height);
    transition: var(--fs-search-top-transition-property) var(--fs-search-top-transition-timing) var(--fs-search-top-transition-function);

    &:hover {
      background-color: var(--fs-search-top-item-bkg-color-hover);
    }

    [data-fs-search-top-item-link] {
      display: flex;
      align-items: flex-end;
      justify-content: flex-start;
      width: 100%;
      padding-left: var(--fs-search-top-padding-left);
      padding-right: var(--fs-search-top-padding-right);
      column-gap: var(--fs-search-top-item-column-gap);
    }

  }

  [data-fs-search-top-item-badge] [data-fs-badge-wrapper] { display: inline-block; }
}