swingmusic/src/assets/css/Search/Search.scss

.right-search {
  position: relative;
  background-color: #03000eab;
  display: grid;
  grid-template-rows: min-content 1fr;
  overflow: hidden;
  width: auto;
  height: 100%;
  padding: $small $small 0 $small;

  .no-res {
    text-align: center;
    // height: calc(100% - 1rem);
    display: grid;

    .highlight {
      padding: $small;
      background-color: rgb(29, 26, 26);
    }
  }

  .heading {
    margin-left: $small;
    background-color: rgb(3, 54, 112);
    width: 6rem;
    padding: $small;
    border-radius: $small;
    margin-bottom: $small;
  }

  .input {
    display: flex;
    align-items: center;
    position: relative;
  }

  .search-icon {
    position: absolute;
    top: 0;
    right: 0;
    height: 2.5rem;
    width: 2.5rem;
    background-image: url(../../icons/search.svg);
    background-size: 70%;
  }
}

.right-search .scrollable {
  overflow-y: auto;

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

.right-search {
  .input-loader {
    width: 100%;
    border-radius: 0.4rem;
    position: relative;

    input {
      width: calc(100% - 2.5rem);
      border: none;
      line-height: 2.5rem;
      background-color: transparent;
      color: rgb(255, 255, 255);
      font-size: 1rem;
      outline: none;
      transition: all 0.5s ease;
      padding-left: 0.4rem;

      &:focus {
        transition: all 0.5s ease;
        color: rgb(255, 255, 255);
        outline: none;

        &::placeholder {
          display: none;
        }
      }
    }
  }
}