/*******************************************************************************
  Host and CSS properties
*******************************************************************************/

:host {
  --macro-carousel-pagination-color: #999;
  --macro-carousel-pagination-color-selected: #000;
  --macro-carousel-pagination-size-clickable: 24px;
  --macro-carousel-pagination-size-dot: 8px;
  --macro-carousel-pagination-border: 1px solid var(--macro-carousel-pagination-color);
  --macro-carousel-pagination-border-selected: 1px solid var(--macro-carousel-pagination-color-selected);

  position: relative;

  display: inline-flex;

  width: var(--macro-carousel-pagination-size-clickable);
  height: var(--macro-carousel-pagination-size-clickable);

  border-radius: 50%;

  overflow: hidden;

  cursor: pointer;

  contain: paint;
}

.bg,
.fg {
  position: absolute;
  top: 50%;
  left: 50%;

  transform: translate(-50%, -50%);

  display: block;

  width: var(--macro-carousel-pagination-size-dot);
  height: var(--macro-carousel-pagination-size-dot);

  border-radius: 50%;
  box-sizing: border-box;

  background-color: var(--macro-carousel-pagination-color);

  content: '';
}

.bg {
  transform: translate(-50%, -50%) scale(2);

  opacity: 0;

  will-change: opacity;
}

.fg {
  border: var(--macro-carousel-pagination-border);
}

:host(:hover) .bg,
:host(.focus-visible) .bg {
  opacity: .2;
}

:host(.selected) .fg {
  background-color: var(--macro-carousel-pagination-color-selected);
  border: var(--macro-carousel-pagination-border-selected);
}

