@import "../../colors";
@import "../../frameless";

.step-navigation {
    margin: 0;
    padding: 0;
    list-style: none;

    li {
        display: inline-block;
        border-radius: 8px / $em;
        padding: 4px / $em;

        .indicator {
            border-radius: 4px / $em;
            background-color: $ui-white;
            width: 8px / $em;
            height: 8px / $em;
        }

        &.active {
            .indicator {
                background-color: $ui-aqua;
            }
        }

        &.selected {
            border: 1px solid $ui-white;
        }
    }
}