@adobe/spectrum-css/dist/components/thumbnail/index-vars.css

The Spectrum CSS top-level backwards compatible package

.spectrum-Thumbnail {
  --spectrum-thumbnail-border-radius: var(--spectrum-alias-border-radius-small, var(--spectrum-global-dimension-size-25));

  --spectrum-thumbnail-size-S: var(--spectrum-global-dimension-size-300);
  --spectrum-thumbnail-size-M: var(--spectrum-global-dimension-size-400);
  --spectrum-thumbnail-size-L: var(--spectrum-global-dimension-size-500);
  --spectrum-thumbnail-size-XL: var(--spectrum-global-dimension-size-600);
  --spectrum-thumbnail-size-XXL: var(--spectrum-global-dimension-size-700);
}

.spectrum-Thumbnail {
  position: relative;
  margin: 0;
  padding: 0;

  display: -ms-flexbox;

  display: flex;
  -ms-flex-align: center;
      align-items: center;
  -ms-flex-pack: center;
      justify-content: center;

  width: var(--spectrum-thumbnail-size-M);
  height: var(--spectrum-thumbnail-size-M);

  border-radius: var(--spectrum-thumbnail-border-radius);
  vertical-align: top;

  overflow: hidden;

  background-size: var(--spectrum-global-dimension-static-size-200, 16px) var(--spectrum-global-dimension-static-size-200, 16px);

  background-position: 0 0, 0 var(--spectrum-global-dimension-static-size-100, 8px), var(--spectrum-global-dimension-static-size-100, 8px) calc(-1 * var(--spectrum-global-dimension-static-size-100, 8px)), calc(-1 * var(--spectrum-global-dimension-static-size-100, 8px)) 0;
}

.spectrum-Thumbnail:before {
    content: '';
    z-index: 2;
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: var(--spectrum-thumbnail-border-radius);
  }

.spectrum-Thumbnail--S {
  width: var(--spectrum-thumbnail-size-S);
  height: var(--spectrum-thumbnail-size-S);
}

.spectrum-Thumbnail--M {
  width: var(--spectrum-thumbnail-size-M);
  height: var(--spectrum-thumbnail-size-M);
}

.spectrum-Thumbnail--L {
  width: var(--spectrum-thumbnail-size-L);
  height: var(--spectrum-thumbnail-size-L);
}

.spectrum-Thumbnail--XL {
  width: var(--spectrum-thumbnail-size-XL);
  height: var(--spectrum-thumbnail-size-XL);
}

.spectrum-Thumbnail--XXL {
  width: var(--spectrum-thumbnail-size-XXL);
  height: var(--spectrum-thumbnail-size-XXL);
}

.spectrum-Thumbnail-image {
  max-height: 100%;
  max-width: 100%;
  z-index: 1;
}

.spectrum-Thumbnail-background {
  position: absolute;
  z-index: 0;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  height: 100%;
  width: 100%;
  background-size: cover;
  background-position: center center;
}

.spectrum-Thumbnail {
  --spectrum-thumbnail-border-size: var(--spectrum-alias-border-size-thin, var(--spectrum-global-dimension-static-size-10));
  --spectrum-thumbnail-border-size-selected: var(--spectrum-alias-border-size-thick, var(--spectrum-global-dimension-static-size-25));
  --spectrum-thumbnail-border-size-focus: var(--spectrum-alias-border-size-thick, var(--spectrum-global-dimension-static-size-25));

  --spectrum-thumbnail-border-color: var(--spectrum-alias-dropshadow-color);
  --spectrum-thumbnail-border-color-focus: var(--spectrum-alias-border-color-focus, var(--spectrum-global-color-blue-400));
  --spectrum-thumbnail-border-color-selected: var(--spectrum-global-color-blue-500);
}

.spectrum-Thumbnail {
  background-color: var(--spectrum-global-color-static-white, rgb(255, 255, 255));
  background-image:
    linear-gradient(-45deg, transparent 75.5%, var(--spectrum-global-color-static-gray-500, rgb(188, 188, 188)) 75.5%),
    linear-gradient(45deg, transparent 75.5%, var(--spectrum-global-color-static-gray-500, rgb(188, 188, 188)) 75.5%),
    linear-gradient(-45deg, var(--spectrum-global-color-static-gray-500, rgb(188, 188, 188)) 25.5%, transparent 25.5%),
    linear-gradient(45deg, var(--spectrum-global-color-static-gray-500, rgb(188, 188, 188)) 25.5%, transparent 25.5%);
}

.spectrum-Thumbnail:before {
    box-shadow: inset 0 0 0 var(--spectrum-thumbnail-border-size) var(--spectrum-thumbnail-border-color);
  }

.spectrum-Thumbnail.is-selected {
    box-shadow: 0 0 0 calc(var(--spectrum-thumbnail-border-size-selected) / 2) var(--spectrum-thumbnail-border-color-selected);
  }

.spectrum-Thumbnail.is-selected:before {
      box-shadow: inset 0 0 0 calc(var(--spectrum-thumbnail-border-size-selected) / 2) var(--spectrum-thumbnail-border-color-selected);
    }

.spectrum-Thumbnail.is-focused,
  .spectrum-Thumbnail.focus-ring {
    box-shadow: 0 0 0 calc(var(--spectrum-thumbnail-border-size-focus) / 2) var(--spectrum-thumbnail-border-color-focus);
  }

.spectrum-Thumbnail.is-focused:before, .spectrum-Thumbnail.focus-ring:before {
      box-shadow: inset 0 0 0 calc(var(--spectrum-thumbnail-border-size-selected) / 2) var(--spectrum-thumbnail-border-color-selected);
    }