$search-height: 48px;
$search-height-new: 52px;
$search-icon-size: 24px;
$search-icon-padding: 16px;
$search-icon-width: 2 * $search-icon-padding + $search-icon-size - 4px;
$search-button-width: 48px;
$glyph-forward: url('chrome://browser/skin/forward.svg');

.search-wrapper {
  padding: 34px 0 38px;

  .only-search & {
    padding: 0 0 38px;
  }

  .logo-and-wordmark {
    $logo-size: 82px;
    $wordmark-size: 134px;

    align-items: center;
    display: flex;
    justify-content: center;
    margin-bottom: 48px;

    .logo {
      display: inline-block;
      height: $logo-size;
      width: $logo-size;
      background: url('chrome://branding/content/about-logo.png') no-repeat center;
      background-size: $logo-size;

      @media (min-resolution: 2x) {
        background-image: url('chrome://branding/content/about-logo@2x.png');
      }
    }

    .wordmark {
      background: url('chrome://branding/content/firefox-wordmark.svg') no-repeat center center;
      background-size: $wordmark-size;
      -moz-context-properties: fill;
      display: inline-block;
      fill: var(--newtab-wordmark-color);
      height: $logo-size;
      margin-inline-start: 16px;
      width: $wordmark-size;
    }

    @media (max-width: $break-point-medium - 1) {
      $logo-size-small: 64px;
      $wordmark-small-size: 100px;

      .logo {
        background-size: $logo-size-small;
        height: $logo-size-small;
        width: $logo-size-small;
      }

      .wordmark {
        background-size: $wordmark-small-size;
        height: $logo-size-small;
        width: $wordmark-small-size;
        margin-inline-start: 12px;
      }
    }
  }

  .search-inner-wrapper {
    cursor: default;
    display: flex;
    min-height: $search-height-new;
    margin: 0 auto;
    position: relative;
    width: $searchbar-width-small;

    @media (min-width: $break-point-medium) {
      width: $searchbar-width-medium;
    }

    @media (min-width: $break-point-large) {
      width: $searchbar-width-large;
    }

    @media (min-width: $break-point-widest) {
      width: $searchbar-width-largest;
    }
  }

  .search-handoff-button,
  input {
    background: var(--newtab-background-color-secondary) var(--newtab-search-icon) $search-icon-padding center no-repeat;
    background-size: $search-icon-size;
    padding-inline-start: $search-icon-width;
    padding-inline-end: 10px;
    padding-block: 0;
    width: 100%;
    box-shadow: $shadow-card;
    border: 1px solid transparent;
    border-radius: 8px;
    color: var(--newtab-text-primary-color);
    -moz-context-properties: fill;
    fill: var(--newtab-text-secondary-color);

    &:dir(rtl) {
      background-position-x: right $search-icon-padding;
    }
  }

  .search-inner-wrapper:active input,
  input:focus {
    border: 1px solid var(--newtab-primary-action-background);
    outline: 0;
    box-shadow: $shadow-focus;
  }

  .search-button {
    background: $glyph-forward no-repeat center center;
    background-size: 16px 16px;
    border: 0;
    border-radius: 0 $border-radius $border-radius 0;
    -moz-context-properties: fill;
    fill: var(--newtab-text-secondary-color);
    height: 100%;
    inset-inline-end: 0;
    position: absolute;
    width: $search-button-width;

    &:focus,
    &:hover {
      background-color: var(--newtab-element-hover-color);
      cursor: pointer;
    }

    &:focus {
      outline: 0;
      box-shadow: $shadow-focus;
      border: 1px solid var(--newtab-primary-action-background);
      border-radius: 0 $border-radius-new $border-radius-new 0;
    }

    &:active {
      background-color: var(--newtab-element-hover-color);
    }

    &:dir(rtl) {
      transform: scaleX(-1);
    }
  }

  &.fake-focus:not(.search.disabled) {
    .search-handoff-button {
      border: 1px solid var(--newtab-primary-action-background);
      box-shadow: $shadow-focus;
    }
  }

  .search-handoff-button {
    padding-inline-end: 15px;
    color: var(--newtab-text-primary-color);
    fill: var(--newtab-text-secondary-color);
    -moz-context-properties: fill;

    .fake-caret {
      top: 18px;
      inset-inline-start: $search-icon-width;

      &:dir(rtl) {
        background-position-x: right $search-icon-padding;
      }
    }
  }

  &.visible-logo {
    .logo-and-wordmark {
      .wordmark {
        fill: var(--newtab-wordmark-color);
      }
    }
  }
}

.non-collapsible-section + .below-search-snippet-wrapper {
  // If search is enabled, we need to invade its large bottom padding.
  margin-top: -48px;
}

@media (max-height: 700px) {
  .search-wrapper {
    padding: 0 0 30px;
  }

  .non-collapsible-section + .below-search-snippet-wrapper {
    // In shorter windows, search doesn't have such a large padding.
    margin-top: -14px;
  }

  .below-search-snippet-wrapper {
    min-height: 0;
  }
}

.search-handoff-button {
  background: var(--newtab-background-color-secondary) var(--newtab-search-icon) $search-icon-padding center no-repeat;
  background-size: $search-icon-size;
  border: solid 1px transparent;
  border-radius: 3px;
  box-shadow: $shadow-secondary, 0 0 0 1px $black-15;
  cursor: text;
  font-size: 15px;
  padding: 0;
  padding-inline-end: 48px;
  padding-inline-start: 46px;
  opacity: 1;
  width: 100%;

  &:dir(rtl) {
    background-position-x: right $search-icon-padding;
  }

  .fake-focus:not(.search-disabled) & {
    border: $input-border-active;
    box-shadow: var(--newtab-textbox-focus-boxshadow);

    .fake-caret {
      display: block;
    }
  }

  .search-disabled & {
    opacity: 0.5;
    box-shadow: none;
  }

  .fake-editable:focus {
    outline: none;
    caret-color: transparent;
  }

  .fake-editable {
    color: transparent;
    height: 100%;
    opacity: 0;
    position: absolute;
    inset: 0;
  }

  .fake-textbox {
    opacity: 0.54;
    text-align: start;
  }

  .fake-caret {
    animation: caret-animation 1.3s steps(5, start) infinite;
    background: var(--newtab-text-primary-color);
    display: none;
    inset-inline-start: 47px;
    height: 17px;
    position: absolute;
    top: 16px;
    width: 1px;

    @keyframes caret-animation {
      to {
        visibility: hidden;
      }
    }
  }
}

@media (min-height: 701px) {
  body:not(.inline-onboarding) .fixed-search {
    main {
      padding-top: 124px;
    }

    &.visible-logo {
      main {
        padding-top: 254px;
      }
    }

    .search-wrapper {
      $search-height: 45px;
      $search-icon-size: 24px;
      $search-icon-padding: 16px;
      $search-header-bar-height: 95px;

      border-bottom: solid 1px var(--newtab-border-color);
      padding: 27px 0;
      background-color: var(--newtab-overlay-color);
      min-height: $search-header-bar-height;
      left: 0;
      position: fixed;
      top: 0;
      width: 100%;
      z-index: 9;

      .search-inner-wrapper {
        min-height: $search-height;
      }

      input {
        background-position-x: $search-icon-padding;
        background-size: $search-icon-size;

        &:dir(rtl) {
          background-position-x: right $search-icon-padding;
        }
      }

      .search-handoff-button .fake-caret {
        top: 14px;
      }

      .logo-and-wordmark {
        display: none;
      }
    }

    .search-handoff-button {
      background-position-x: $search-icon-padding;
      background-size: $search-icon-size;

      &:dir(rtl) {
        background-position-x: right $search-icon-padding;
      }

      .fake-caret {
        top: 10px;
      }
    }
  }
}

@at-root {
  // Adjust the style of the contentSearchUI-generated table
  .contentSearchSuggestionTable {
    border: 0;
    box-shadow: $context-menu-shadow;
    transform: translateY($textbox-shadow-size);
    background-color: var(--newtab-background-color);

    .contentSearchHeader {
      color: var(--newtab-text-secondary-color);
      background-color: var(--newtab-background-color-secondary);
    }

    .contentSearchHeader,
    .contentSearchSettingsButton {
      border-color: var(--newtab-border-color);
    }

    .contentSearchSuggestionsList {
      color: var(--newtab-text-primary-color);
      border: 0;
    }

    .contentSearchOneOffsTable {
      border-top: solid 1px var(--newtab-border-color);
      background-color: var(--newtab-background-color);
    }

    .contentSearchSearchWithHeaderSearchText {
      color: var(--newtab-text-primary-color);
    }

    .contentSearchSuggestionRow {
      &.selected {
        background: var(--newtab-element-hover-color);
        color: var(--newtab-text-primary-color);

        &:active {
          background: var(--newtab-element-active-color);
        }

        .historyIcon {
          fill: var(--newtab-text-secondary-color);
        }
      }
    }

    .contentSearchOneOffItem {
      // Make the border slightly shorter by offsetting from the top and bottom
      $border-offset: 18%;

      background-image: none;
      border-image: linear-gradient(transparent $border-offset, var(--newtab-border-color) $border-offset, var(--newtab-border-color) 100% - $border-offset, transparent 100% - $border-offset) 1;
      border-inline-end: 1px solid;
      position: relative;

      &.selected {
        background: var(--newtab-element-hover-color);
      }

      &:active {
        background: var(--newtab-element-active-color);
      }
    }

    .contentSearchSettingsButton {
      &:hover {
        background: var(--newtab-element-hover-color);
        color: var(--newtab-text-primary-color);
      }
    }
  }

  .contentSearchHeaderRow > td > img,
  .contentSearchSuggestionRow > td > .historyIcon {
    margin-inline-start: 7px;
    margin-inline-end: 15px;
  }
}