.md-global-search-input-wrapper {
  position: relative;
  border-radius: 6.25rem;
  background-color: var(--mds-color-theme-background-secondary-normal);
  border: 0.0625rem solid transparent;
  box-sizing: border-box;
  height: 1.75rem;
  display: flex;
  align-content: center;

  &[data-focus='true'] {
    box-shadow: var(--md-globals-focus-ring-box-shadow);
  }

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

  .md-global-search-input-container {
    position: relative;
    display: flex;
    flex-grow: 1;
    align-items: center;
    overflow-x: scroll;
    overflow-y: hidden;

    &::-webkit-scrollbar {
      display: none;
    }

    -ms-overflow-style: none;
    scrollbar-width: none;
  }

  label {
    width: 1px;
    height: 1px;
    overflow: hidden;
  }

  input {
    border: 0;
    background-color: transparent;
    box-shadow: none;
    color: var(--mds-color-theme-text-primary-normal);
    font-size: 0.875rem;
    height: 100%;
    display: inline-block;
    flex: 1;

    // remove focus from input since focus ring is applied to parent div (md-global-search-input-wrapper)
    &:focus {
      background-color: transparent;
      outline: none;
      box-shadow: none;
    }

    &:focus-visible {
      outline: none;
    }

    &::placeholder {
      color: var(--mds-color-theme-text-secondary-normal);
      opacity: 1;
    }

    &::selection {
      color: var(--mds-color-theme-inverted-text-primary-normal);
      background-color: var(--mds-color-theme-background-accent-active);
    }
  }

  .aria-alert {
    width: 1px;
    height: 1px;
    overflow: hidden;
  }

  .md-global-search-input-search {
    margin-left: 1.125rem;
    margin-right: 0.5625rem;
    height: 1.625rem;
    align-content: center;
    flex-grow: 0;
  }

  .md-global-search-input-clear {
    border: 0;
    background-color: transparent;
    cursor: pointer;
    color: var(--mds-color-theme-text-primary-normal);

    &:active {
      color: var(--mds-color-theme-text-primary-normal);
    }
  }

  .md-global-search-input-search-context {
    display: inline-flex;
    justify-content: center;
    align-content: center;
    flex-direction: column;
    height: 100%;
    padding-right: 0.25rem;

    p {
      box-sizing: border-box;
      background-color: var(--mds-color-theme-button-primary-normal);
      color: var(--mds-color-theme-inverted-text-primary-normal);
      z-index: 1;
      border-radius: 1rem;
      padding: 0.125rem 0.5rem 0.125rem 0.5rem;
      font-size: 0.875rem;
      height: 1.5rem;
      margin: 0;
      line-height: 1.3rem;
      white-space: nowrap;
    }
  }

  ::-webkit-search-cancel-button {
    -webkit-appearance: none;
    pointer-events: none;
  }
}