@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;
  $size--sm: 200px;
  $size--md: 280px;
  $size--lg: 350px;

  .geoscene-basemap-gallery {
    position: relative;
    background-color: $background-color;
    overflow-y: auto;
    color: $font-color;
    container-type: inline-size;

    /* stylelint-disable-next-line order/order */
    @include loopingProgressBar(".geoscene-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;
    }

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

    &__empty-message {
      padding: $cap-spacing $side-spacing;
      animation: geoscene-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: geoscene-fade-in $animation-duration ease-in-out;

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

        .geoscene-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,
      &.geoscene-basemap-gallery__item--selected:hover,
      &.geoscene-basemap-gallery__item--selected:focus {
        border-color: $border-color--active;
        background-color: $background-color--active;
        cursor: auto;

        .geoscene-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;
        }
      }

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


    @container (width > #{$size--sm}) and (width <= #{$size--md}) {
      .geoscene-basemap-gallery__item-thumbnail {
        width: $thumbnail-width--narrow;
        min-width: $thumbnail-width--narrow;
        aspect-ratio: 1;
      }
    }

    // When really small or very large, we display the items as a grid, with the title of each item is placed below the
    // thumbnail.
    @container (width <= #{$size--sm}) or (width >= #{$size--lg}) {
      .geoscene-basemap-gallery__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;
      }

      .geoscene-basemap-gallery__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;
        }
      }
    }

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

  calcite-popover > .geoscene-basemap-gallery {
    width: $size--md;
    max-height: 80vh;
  }

  // When placed inside of a panel, we want the gallery to take up the full width of the panel.
  .geoscene-ui-corner calcite-panel > .geoscene-basemap-gallery.geoscene-widget.geoscene-widget--panel {
    width: unset;
  }

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

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