@use './button.scss';

:host {
  --frigate-card-next-prev-size: 48px;
  --frigate-card-next-prev-size-hover: calc(var(--frigate-card-next-prev-size) * 2);
  --frigate-card-prev-position: 45px;
  --frigate-card-next-position: 45px;
  --mdc-icon-button-size: var(--frigate-card-next-prev-size);
  --mdc-icon-size: calc(var(--mdc-icon-button-size) / 2);
}

.controls {
  position: absolute;
  z-index: 1;
  overflow: hidden;
}
.controls.previous {
  left: var(--frigate-card-prev-position);
}
.controls.next {
  right: var(--frigate-card-next-position);
}

.controls.icons {
  top: calc(50% - (var(--frigate-card-next-prev-size) / 2));
}

.controls.thumbnails {
  border-radius: 50%;
  height: var(--frigate-card-next-prev-size);
  top: calc(50% - (var(--frigate-card-next-prev-size) / 2));
  box-shadow: var(--frigate-card-css-box-shadow, 0px 0px 20px 5px black);
  transition: all 0.2s ease-out;
  opacity: 0.8;
  aspect-ratio: 1 / 1;
}
.controls.thumbnails:hover {
  opacity: 1 !important;
  height: var(--frigate-card-next-prev-size-hover);
  top: calc(50% - (var(--frigate-card-next-prev-size-hover) / 2));
}

.controls.previous.thumbnails:hover {
  left: calc(
    var(--frigate-card-prev-position) -
      (var(--frigate-card-next-prev-size-hover) - var(--frigate-card-next-prev-size)) / 2
  );
}

.controls.next.thumbnails:hover {
  right: calc(
    var(--frigate-card-next-position) -
      (var(--frigate-card-next-prev-size-hover) - var(--frigate-card-next-prev-size)) / 2
  );
}