/* Copyright (c) 2020, the Dart project authors.  Please see the AUTHORS file
   for details. All rights reserved. Use of this source code is governed by a
   BSD-style license that can be found in the LICENSE file. */

@use 'variables';

.listing-info {
  display: flex;
  padding: 16px 0px 20px 0px;

  .listing-info-count {
    flex-grow: 1;
    overflow-x: auto;
    padding-right: 12px;
  }

  .info-identifier {
    font-size: 14px;
    font-weight: bold;
    text-transform: uppercase;
    white-space: nowrap;

    .sort-control-selected {
      display: inline-block;
      background: transparent;
      color: var(--pub-detail_tab-active-color);
      font-size: 14px;
      font-weight: 400;
      padding: 0;
      text-align: left;
      text-transform: uppercase;
      white-space: nowrap;

      @media (max-width: variables.$device-mobile-max-width) {
        display: none;
      }
    }
  }

  .count {
    background: var(--pub-inset-bgColor);
    display: inline-block;
    font-size: 12px;
    font-family: monospace;
    padding: 5px;
  }
}

.sort-control {
  position: relative;
  cursor: pointer;

  .sort-control-popup {
    display: none;

    border: 2px solid var(--pub-neutral-borderColor);
    border-radius: 4px;
    position: absolute;
    right: 0px;
    white-space: nowrap;
    z-index: variables.$z-index-nav-mask;

    .sort-control-option {
      display: block;
      width: 100%;
      background: var(--pub-neutral-bgColor);
      color: var(--pub-neutral-textColor);
      font-size: 14px;
      padding: 12px 12px;
      text-align: left;

      &:hover {
        background: var(--pub-neutral-hover-bgColor);
        color: var(--pub-sort_control_hover-text-color);
      }

      &.selected {
        background: var(--pub-selected-bgColor);
        color: var(--pub-sort_control_selected-text-color);
      }
    }
  }

  &.hover,
  &:focus-within {
    .sort-control-popup {
      display: block;
    }
  }

  &:hover {
    .sort-control-popup {
      @media (min-width: variables.$device-desktop-min-width) {
        display: block;
      }
    }
  }
}

.overflow-hidden { overflow: hidden;}

.overflow-auto {overflow: auto;}

.carousel {
  position: fixed;
  width: 100%;
  height: 100%;
  left: 0px;
  top: 0px;
  z-index: 1;
  display: none;
  background: var(--pub-carousel-background-color);

  .image-container {
    user-select: none;
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 90%;
    height: 90%;
  }

  .carousel-image {
    position: fixed;
    left: inherit;
    top: inherit;
    transform: inherit;
    max-width: 100%;
    max-height: 100%;
  }

  .carousel-nav {
    background-color: var(--pub-carousel_nav-background-color);
    position: fixed;
    top: 50%;
    transform: translateY(-50%);
    display: none;
    z-index: 2;

    &:hover {
      background-color: var(--pub-carousel_nav_hover-background-color);
     }
   }

  .carousel-next {
    right: 10px;
  }

  .carousel-prev {
    left: 10px;
  }

  .screenshot-description {
    font-size: 16px;
    z-index: 2;
    color: var(--pub-carousel_screenshot-text-color);
    bottom: 0;
    left: 20px;
    position: absolute;
    background: var(--pub-carousel_screenshot-background-color);
    border-radius: 25px;
    max-width: 35%;
    padding:12px;
  }
 }

.thumbnail-image {
  border: solid 1px #d5d4d4;
}

.collections-icon {
  height: 30px;
  width: 30px;
  opacity: 70%;
  background-color: var(--pub-collections_icon-background-color);
  margin-top: auto;
  margin-left: -30px;
}

.thumbnail-container {
  display: flex;
  width: inherit;
  height: inherit;
  justify-content: center;
  align-items: center;
  background: var(--pub-thumbnail_container-background-color);
}

.packages {
  .packages-item {
    margin: 0px -30px 6px -30px;
    padding: 15px 30px;

    &:hover {
      background: var(--pub-neutral-hover-bgColor);
    }
  }

  .packages-header {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: flex-end;
    min-height: 40px;
  }

  .packages-container {
    display: flex;
    flex-flow: row nowrap;
    gap: 5px;
    justify-content: space-between;
  }

  .packages-body {
    display: flex;
    flex-flow: column nowrap;
  }

  .packages-screenshot-thumbnail {
    display: flex;
    width: 102px;
    height: 102px;
    min-width: 102px;
    margin-top: 10px;
    cursor: pointer;

    @include variables.brightness-on-hover;
  }

  .packages-title {
    flex-grow: 1;
    font-size: 22px;
    font-weight: 500;
    margin: 0;
    overflow-wrap: anywhere;

    .like-button-and-label--button img {
      width: 18px;
      height: 18px;
    }
  }

  .packages-recent {
    color: var(--pub-pkg_list_recent_item-text-color);
    font-family: var(--pub-font-family-body);
    font-size: 12px;
    margin: 0px 8px 0px 16px;
    white-space: nowrap;

    .packages-recent-icon {
      width: 10px;
      height: 10px;
      opacity: 0.6;
      position: relative;
      top: 1px;
    }
  }

  .packages-description {
    margin: 4px 0px;
  }

  .packages-metadata {
    font-size: 12px;
  }

  .packages-metadata-block {
    margin: 0 8px 0 0;
  }

  .packages-api {
    font-size: 12px;
    margin-top: 6px;
    display: flex;

    .packages-api-label {
      padding-right: 8px;
    }

    .packages-api-links {
      overflow-wrap: anywhere;
    }

    .-rest {
      padding-left: 16px;
    }
  }
}

.publishers {
  .publishers-item {
    padding: 4px;
    margin-left: -4px;
    margin-right: 8px;

    &:hover {
      background: var(--pub-neutral-hover-bgColor);
    }

    .publishers-item-title {
      font-size: 22px;
      font-weight: 500;
    }
  }

  &.-global {
    display: flex;
    flex-wrap: wrap;

    .publishers-item {
      flex: 1 1 26%;
    }
  }
}

.pagination {
  margin: 20px auto;
  padding: 0;
  list-style: none;
  text-align: center;

  > li {
    display: inline-block;
    text-transform: uppercase;
    color: var(--pub-pagination-active-color);
    background: var(--pub-inset-bgColor);
    font-size: 14px;
    border-radius: 3px;
    margin: 40px 3px 0 3px;
    min-width: 42px; // otherwise page "1" would be much narrower than e.g. page "2"

    &.-disabled {
      pointer-events: none;
      color: var(--pub-pagination-inactive-color);
    }

    &.-active {
      pointer-events: none;
      color: var(--pub-inset-bgColor);
      background: var(--pub-pagination-active-color);
    }

    > a {
      display: inline-block;
      padding: 10px 16px;
      color: inherit;
      font-weight: 600;
      text-decoration: none;
    }
  }
}

.search-form-container {
  display: flex;

  @media (max-width: variables.$device-mobile-max-width) {
    display: block;

    .search-form {
      display: none;
    }

    &.-active-on-mobile {
      .search-form {
        display: block;
      }
    }
  }

  .search-form {
    flex-grow: 0;
    flex-shrink: 0;
    flex-basis: 200px;

    @media (min-width: variables.$device-desktop-min-width) {
      margin-right: 40px;
    }
  }

  .search-results {
    flex-grow: 1;
  }

  .search-form-section-header {
    display: flex;
    font-family: var(--pub-font-family-body);
    font-size: 14px;
    font-weight: bold;

    .search-form-section-header-label {
      flex-grow: 1;
    }

    .foldable-icon {
      position: relative;
      top: 7px;
    }
  }

  .search-form-section {
    .foldable-icon {
      margin-left: 18px;
      width: 12px;

      transform: rotate(180deg);
      transition: transform .3s linear;
    }

    &.-active {
      .foldable-icon {
        transform: rotate(360deg);
      }
    }
  }

  .search-form-linked-checkbox {
    cursor: pointer;

    &:hover {
      background-color: var(--pub-inset-bgColor);
    }

    a {
      color: var(--pub-neutral-textColor);
      text-decoration: none;
    }

    label {
      position: relative;
      top: -6px;
    }
  }
}
