@use './button.scss';

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

.controls {
  position: absolute;
  z-index: 1;
  overflow: hidden;
}
.controls.left {
  left: var(--advanced-camera-card-left-position);
}
.controls.right {
  right: var(--advanced-camera-card-right-position);
}

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

.controls.thumbnails {
  border-radius: 50%;
  height: var(--advanced-camera-card-next-prev-size);
  top: calc(50% - (var(--advanced-camera-card-next-prev-size) / 2));
  box-shadow: var(--advanced-camera-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(--advanced-camera-card-next-prev-size-hover);
  top: calc(50% - (var(--advanced-camera-card-next-prev-size-hover) / 2));
}

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

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