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

  padding: 34px 0 64px;

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

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

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

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

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

  input {
    background: var(--newtab-textbox-background-color) var(--newtab-search-icon) $search-icon-padding center no-repeat;
    background-size: $search-icon-size;
    border: solid 1px var(--newtab-search-border-color);
    box-shadow: $shadow-secondary, 0 0 0 1px $black-15;
    font-size: 15px;
    -moz-context-properties: fill;
    fill: var(--newtab-search-icon-color);
    padding: 0;
    padding-inline-end: $search-button-width;
    padding-inline-start: $search-icon-width;
    width: 100%;

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

  &:hover input {
    box-shadow: $shadow-secondary, 0 0 0 1px $black-25;
  }

  .search-inner-wrapper:active input,
  input:focus {
    border: $input-border-active;
    box-shadow: var(--newtab-textbox-focus-boxshadow);
  }

  .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-search-icon-color);
    height: 100%;
    offset-inline-end: 0;
    position: absolute;
    width: $search-button-width;

    &:focus,
    &:hover {
      background-color: $grey-90-10;
      cursor: pointer;
    }

    &:active {
      background-color: $grey-90-20;
    }

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

@media (min-height: 701px) {
  .fixed-search {
    main {
      padding-top: 146px;
    }

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

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

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

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

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

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

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

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

    .contentSearchSuggestionsList {
      border: 0;
    }

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

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

    .contentSearchSuggestionsContainer {
      background-color: var(--newtab-search-dropdown-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-icon-secondary-color);
        }
      }
    }

    .contentSearchOneOffsTable {
      .contentSearchSuggestionsContainer {
        background-color: var(--newtab-search-dropdown-header-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-secondary-color) $border-offset, var(--newtab-border-secondary-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;
  }
}
