@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 {
    color: $font-color;
    background-color: $background-color;
    overflow-y: auto;
    position: relative;
    width: auto;

    &.no-animations * {
      animation: none !important;
      transition: none !important;
      transition-duration: 0 !important;
      outline: none !important;
    }

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

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

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

    &--source-refreshing &__item-container,
    &.esri-disabled &__item {
      opacity: $opacity--disabled;
      pointer-events: none;
      animation: 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;

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

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

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

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

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

        span {
          width: 100%;
          text-align: start;

          // 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
          overflow: hidden;
          text-overflow: ellipsis;
          overflow-wrap: break-word; // Force long words to break
          display: -webkit-box;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;
        }
      }

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

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

      &:hover,
      &:focus {
        outline: none;
        border-color: $interactive-font-color;
        background-color: $background-color--hover;

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

      &.esri-basemap-gallery__item--error:hover,
      &.esri-basemap-gallery__item--error:focus {
        background-color: $background-color;
        border-color: transparent;
      }

      &-content {
        display: flex;
        flex-direction: column;
        gap: $cap-spacing;
        padding-inline: $side-spacing--half;
        padding-block: $cap-spacing--eighth;
        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);
          --calcite-chip-spacing-s-internal: 0.15rem;
          cursor: inherit;
          height: 16px;
          max-width: 60px;
        }
      }
    }

    // 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 {
      &-thumbnail {
        min-width: $thumbnail-width--narrow;
        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-direction: column;
      flex-flow: column wrap;
      text-align: center;
      border: $item-border-size solid $border-color--subtle;

      &-thumbnail {
        // Thumbnail is above, to move the border to the bottom.
        border-inline-end: none;
        border-block-end: $item-border-size solid $border-color--subtle;

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

      &-content {
        width: 100%;
        height: $item-content-height;
        position: relative;
        padding: 0;
      }

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

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

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

    @include loopingProgressBar(".esri-basemap-gallery__loader");
  }

  .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();
}