@use "sass:math";

@mixin basemapGallery() {
  $transition-duration: 250ms;
  $animation-duration: 500ms;
  $thumbnail-width: 120px;
  $thumbnail-width--narrow: 80px;
  $item-border-size: 1px;
  $item-content-height: 40px;

  .esri-basemap-gallery {
    position: relative;
    background-color: $background-color;
    width: auto;
    overflow-y: auto;
    color: $font-color;

    /* stylelint-disable-next-line order/order */
    @include loopingProgressBar(".esri-basemap-gallery__loader");

    &:focus-within {
      @include outlineStyle();
    }

    &__item-container {
      display: flex;
      position: relative;
      flex-flow: column nowrap;
      gap: $cap-spacing--quarter;
      transition: opacity $transition-duration ease-in-out;
      margin: 0;
      padding-block: $cap-spacing--quarter;
      padding-inline: $side-spacing--quarter;
      list-style: none;
    }

    &--grid &__item-container {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax($thumbnail-width, 1fr));
      gap: $cap-spacing $side-spacing;
      padding-block: $cap-spacing;
      padding-inline: $side-spacing;
    }

    &--source-refreshing &__item-container,
    &.esri-disabled &__item {
      opacity: $opacity--disabled;
      animation: none;
      pointer-events: none;
    }

    &__empty-message {
      padding: $cap-spacing $side-spacing;
      animation: esri-fade-in $animation-duration ease-in-out;
    }

    &__item {
      $transition:
        background-color $transition-duration ease-in-out,
        border-color $transition-duration ease-in-out;

      box-sizing: border-box;
      display: flex;
      position: relative;
      flex-direction: row;
      align-items: center;
      transition: $transition;
      border: $item-border-size solid transparent;
      cursor: pointer;
      width: 100%;
      animation: esri-fade-in $animation-duration ease-in-out;

      &:hover {
        border-color: $interactive-font-color;
        background-color: $background-color--hover;

        .esri-basemap-gallery__item-title {
          color: $font-color;
        }
      }

      &:focus {
        outline: none;
      }

      &--error {
        opacity: $opacity--disabled;
        cursor: auto;
      }

      &-thumbnail {
        flex-shrink: 0;
        transition: $transition;
        border-inline-end: $item-border-size solid $border-color--subtle;
        width: $thumbnail-width;
        min-width: $thumbnail-width;
        aspect-ratio: 1.5;
      }

      &-title {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        transition:
          color $transition-duration ease-in-out,
          font-weight $transition-duration ease-in-out;
        width: 100%;
        height: 100%;
        color: $interactive-font-color;
        font-size: $font-size--small;

        span {
          display: -webkit-box;
          width: 100%;
          overflow: hidden;
          text-align: start;
          text-overflow: ellipsis;
          overflow-wrap: break-word; // Force long words to break
          -webkit-box-orient: vertical;

          // Used for truncating after two lines
          // https://css-tricks.com/line-clampin/#aa-the-standardized-way
          // https://drafts.csswg.org/css-overflow-3/#webkit-line-clamp
          -webkit-line-clamp: 2;
          line-clamp: 2;
        }
      }

      &--selected,
      &.esri-basemap-gallery__item--selected:hover,
      &.esri-basemap-gallery__item--selected:focus {
        border-color: $border-color--active;
        background-color: $background-color--active;
        cursor: auto;

        .esri-basemap-gallery__item-title {
          color: $font-color;
          font-weight: $font-weight--medium;
        }
      }

      &-content {
        display: flex;
        flex-direction: column;
        gap: $cap-spacing;
        padding-block: $cap-spacing--eighth;
        padding-inline: $side-spacing--three-quarters;
        min-width: 0;
      }

      &-tags-container {
        display: flex;
        flex-direction: row;
        gap: $side-spacing--quarter;

        calcite-chip {
          --calcite-font-size--2: var(--calcite-font-size--3);

          cursor: inherit;
          max-width: 60px;
        }
      }

      @supports (object-fit: cover) {
        &-thumbnail {
          object-fit: cover;
        }
      }
    }

    // When we don't have a lot of horizontal space, we make the thumbnails square.
    // See https://devtopia.esri.com/WebGIS/arcgis-js-api/issues/52202
    &--narrow-items &__item {
      // Ensure we stay above the small breakpoint to avoid going into a loop where the gallery
      // switches to a grid layout, which becomes wider than the small breakpoint and causes it to
      // go back to the default layout, which is narrower than the small breakpoint, and so on.
      // See #63724
      min-width: var(--esri-basemap-gallery-small);

      &-thumbnail {
        width: $thumbnail-width--narrow;
        min-width: $thumbnail-width--narrow;
        aspect-ratio: 1;
      }
    }

    // When displayed as a grid, the title of each item is placed below the thumbnail.
    &--grid &__item {
      flex-flow: column wrap;
      text-align: center;

      &:not(&--selected, :hover) {
        border-color: $border-color--subtle;
      }

      &-thumbnail {
        border-block-end: $item-border-size solid $border-color--subtle;

        // Thumbnail is above, to move the border to the bottom.
        border-inline-end: none;

        // Thumbnail should fill the whole item instead of having a specific width.
        width: 100%;
        min-width: 0;
        height: auto;
      }

      &-content {
        position: relative;
        padding-block: $cap-spacing--third;
        padding-inline: $side-spacing--half;
        width: 100%;
        height: $item-content-height;
      }

      &-tags-container {
        position: absolute;
        inset-block-end: $item-content-height + $side-spacing--third;
        inset-inline-end: $side-spacing--third;

        calcite-chip {
          max-width: math.floor(($thumbnail-width - 2 * $side-spacing--third - $side-spacing--quarter) * 0.5);
        }
      }
    }

    &__loader {
      position: absolute;
      top: 0;
      right: 0;
      left: 0;
      width: 100%;
      height: 2px;
      animation: esri-fade-in $animation-duration ease-in-out;
    }
  }

  .esri-view .esri-basemap-gallery {
    width: $panel-width;
  }

  // On large screens, allow the gallery to be larger.
  .esri-view-width-greater-than-large .esri-ui-corner .esri-basemap-gallery {
    width: $panel-width--plus-half;
  }
}

@if $include_BasemapGallery == true {
  @include basemapGallery();
}