/*
 * Copyright 2023 Harness, Inc.
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *     http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

.main {
  padding: var(--spacing-large) var(--spacing-xlarge) 0 var(--spacing-xlarge) !important;
  position: relative;

  div[class*='TextInput'] {
    margin-bottom: 0 !important;
    margin-left: 0 !important;

    input {
      background: transparent !important;
      border: none;
    }
  }

  > div {
    align-items: center;
    padding-bottom: var(--spacing-large) !important;
    // border-bottom: 1px solid var(--grey-100);
  }

  .btnColorFix > span[data-icon] {
    svg[fill='none'] g > path {
      fill: none !important;
    }
  }

  .refRoot,
  .rootSlash {
    align-self: center;
  }

  :global {
    .bp3-breadcrumb,
    .bp3-breadcrumb-current,
    .bp3-breadcrumbs-collapsed {
      white-space: nowrap !important;
      font-size: 13px;
      font-weight: var(--typography-weight, normal);
      font-family: var(--font-family);
      color: var(--grey-900);
      line-height: var(--typography-line-height, var(--line-height));
    }

    .bp3-breadcrumbs > li::after {
      background: none;
      content: '/';
      color: var(--grey-900);
      background: none;
      text-align: center;
      height: 100% !important;
      padding-top: 2px !important;
    }

    .bp3-breadcrumbs-collapsed {
      background: var(--grey-100);
    }
  }
}

.searchBoxCtn {
  position: absolute;
  right: 16px;
  top: -50px;
  z-index: 2;
  padding-bottom: 0 !important;
  margin: 0;
  cursor: pointer;

  input,
  input:focus {
    border: 1px solid var(--grey-200) !important;
    pointer-events: none;
    user-select: none;
  }

  input {
    width: 350px !important;
  }

  img {
    position: absolute;
    top: 5px;
    right: 6px;
  }
}

// to make space between the Archive banner and search box
.searchBoxPositionArchivedRepo {
  top: -70px !important;
}

.mainBorder {
  border-bottom: 1px solid var(--grey-200) !important;
}

.mainContainer {
  background: var(--grey-0) !important;
}