@layer component.base {
  .slides__dot {
    text-decoration: none;
    display: inline-block;
  }
}

@layer component.layout {
  .slides__dots {
    text-align: center;
    padding: 1rem 0;
  }
}

@layer component.theme {
  .slides__dot {
    background-color: currentColor;
    opacity: 0.2;
    padding: 0;
    margin: 0.1666rem;
    width: 0.5555rem;
    aspect-ratio: 1/1;
    cursor: pointer;
    border: none;
    vertical-align: middle;
    transition:
      opacity 0.25s,
      aspect-ratio 0.25s;
  }

  .slides__dot--active {
    opacity: 1;
    aspect-ratio: 10/17;
  }
}