@import "theme.scss";

.search-container {
  display: flex;
  flex-direction: column;
  gap: 1rem;

  .search-bar {
    input[type="search"] {
      width: 100%;
      padding: 0.5rem 1rem;
      font-size: 1rem;
      border: 1px solid $search-border;
      border-radius: 4px;
      transition: border-color 0.2s;

      &:focus {
        border-color: $accent-color;
        outline: none;
      }
    }
  }

  .search-results {
    display: flex;
    justify-content: space-between;
    gap: 1rem;

    .search-result-list {
      flex: 1;
      list-style: none;
      margin: 0;
      padding: 0;

      .search-result {
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
        padding: 0.5rem;
        border: 1px solid $search-border;
        border-radius: 4px;
        background-color: $search-background;
        transition: box-shadow 0.2s;
        margin: 0.2rem;
        min-height: 6rem;

        .result-container {
          display: flex;
          justify-content: space-between;
          align-items: center;

          .search-result-album,
          .search-result-artist {
            font-size: 1rem;
            font-weight: bold;
          }

          .search-item-type {
            font-size: 0.9rem;
            color: $text-controls-color;
          }

          .right-side-result {
            display: flex;
            align-items: center;
            gap: 0.5rem;

            .search-result-options {
              background: none;
              border: none;
              padding: 0;
              cursor: pointer;

              .search-result-options-icon {
                fill: $text-controls-color;
                transition: fill 0.2s;

                &:hover {
                  fill: $controls-hover-color;
                }

                &:active {
                  fill: $controls-click-color;
                }
              }
            }
          }
        }
      }
    }
  }
}