/*
 *
 */

.stepDots {

	&-item:not(:last-child) {
       margin-right: .5em;
	}

	&-dot {
		width: .8rem;
		height: .8rem;
		background-color: var(--bordercolor-input, $pm-global-border);
		transition: background-color .25s easing(ease);

		&:focus,
		&:hover,
		&:active {
			background-color: $pm-primary;
		}
		&[aria-selected="true"] {
			background-color: var(--secondary-bg-color, $pm-global-altgrey);
		}
	}

}