@use "lib/viewport";

// these are add-on styles controlled by settings
@import "special-styles";

.welcome-banner:not(.below-site-header-outlet, .above-main-container-outlet),
.header-search--enabled .floating-search-input-wrapper,
.search-header--visible .floating-search-input-wrapper {
  display: none;
}

.search-banner {
  background-image: var(--custom-bg);

  @if $tile-background_image == "true" {
    background-size: auto;
  } @else {
    background-size: cover;
    background-repeat: no-repeat;
  }
}

.welcome-banner {
  .btn.search-icon:not(.has-search-button-text) {
    z-index: 2;
    background: transparent;
    line-height: 1;
    color: var(--primary-medium);
    height: 100%;
    position: absolute;
    left: 0;

    .rtl & {
      right: 0;
      left: unset;
    }

    .discourse-no-touch & {
      &:hover {
        background: transparent;
        color: var(--primary);

        .d-icon {
          color: currentcolor;
        }
      }
    }

    + .search-menu-container .search-input {
      padding-left: 1.75em;

      .rtl & {
        padding-left: unset;
        padding-right: 1.75em;
      }
    }

    + .search-menu-container .search-input .search-context {
      margin-left: 4px;
    }
  }

  .custom-search-banner-headline {
    font-family: var(--heading-font-family);
    font-size: var(--font-up-5);
    font-weight: bold;
    margin-bottom: 0.5rem;
    text-align: center;
  }

  .btn.search-icon.has-search-button-text {
    margin-left: 0.5em;
    column-gap: 0.5em;
    background-color: var(--tertiary);
    color: var(--secondary);
    position: unset;
    height: unset;

    &:hover {
      background-color: var(--tertiary-hover);
      color: var(--secondary);
    }

    .d-icon {
      color: var(--secondary);
    }
  }
}

.custom-search-banner-wrap {
  padding: 1em var(--d-wrap-padding-h) 1.25em;

  @include viewport.from(sm) {
    padding: 2.5em var(--d-wrap-padding-h) 3em;
  }
}

// fixes core style clash that hides the banner on narrow screens
.custom-search-banner .welcome-banner__wrap .search-menu {
  display: flex;
}

.custom-search-banner-wrap p {
  text-align: center;
}