@use 'const.scss';
@use 'locked.scss';

:host {
  display: block;
  width: 100%;
  height: 100%;

  background-color: var(--advanced-camera-card-thumbnail-background);

  --advanced-camera-card-carousel-thumbnail-opacity: 1;
}

:host([direction='vertical']) {
  height: 100%;
}
:host([direction='horizontal']) {
  // In fullscreen mode, without explicitly setting the height to auto Chrome
  // will construct a stylesheet with 100% height.
  height: auto;
}

.embla__slide {
  flex: 0 0 auto;
  opacity: var(--advanced-camera-card-carousel-thumbnail-opacity);
}
.embla__slide.slide-selected {
  opacity: 1;
}

advanced-camera-card-thumbnail {
  width: var(--advanced-camera-card-thumbnail-size);
  height: var(--advanced-camera-card-thumbnail-size);

  // Do not let thumbnails span beyond the width of the carousel.
  max-width: 100%;
}
advanced-camera-card-thumbnail[details] {
  width: var(--advanced-camera-card-thumbnail-details-width);
}