.SequenceContainer {
    position: absolute;
    left: 50%;
    top: 14px;
    transform: translate(-50%, 0);
    display: flex;
    z-index: 10;
}

.SequencePlay,
.SequencePlayDisabled,
.SequenceStepNext,
.SequenceStepNextDisabled,
.SequenceStepNextHighlight,
.SequenceStepPrev,
.SequenceStepPrevDisabled,
.SequenceStepPrevHighlight {
    display: flex;
    flex: auto;
    align-items: center;
    justify-content: center;
}

.SequencePlay,
.SequencePlayDisabled,
.SequenceStepNext,
.SequenceStepNextDisabled,
.SequenceStepPrev,
.SequenceStepPrevDisabled {
    background: rgba(36, 37, 40, 0.3);
}

.SequenceStepNextHighlight,
.SequenceStepPrevHighlight {
    background: rgba(36, 37, 40, 0.6);
}

.SequenceStepNext,
.SequenceStepNextDisabled,
.SequenceStepNextHighlight {
    order: 2;
}

.SequenceStepPrev,
.SequenceStepPrevDisabled,
.SequenceStepPrevHighlight {
    order: 0;
}

.SequencePlay,
.SequencePlayDisabled {
    order: 1;
}

.SequencePlay:hover,
.SequenceStepNext:hover,
.SequenceStepNextHighlight:hover,
.SequenceStepPrev:hover,
.SequenceStepPrevHighlight:hover {
    cursor: pointer;
    cursor: hand;
}

.SequenceStepNext,
.SequenceStepNextDisabled,
.SequenceStepNextHighlight {
    border-top-right-radius: 100px;
    border-bottom-right-radius: 100px;
}

.SequenceStepPrev,
.SequenceStepPrevDisabled,
.SequenceStepPrevHighlight {
    border-top-left-radius: 100px;
    border-bottom-left-radius: 100px;
}

.Play.SequenceComponentIcon,
.PlayDisabled.SequenceComponentIcon {
    background-image: url('./stepper-play.svg');
}

.Stop.SequenceComponentIcon,
.StopDisabled.SequenceComponentIcon {
    background-image: url('./stepper-stop.svg');
}

.SequenceStepPrev .SequenceComponentIcon,
.SequenceStepPrevDisabled .SequenceComponentIcon,
.SequenceStepPrevHighlight .SequenceComponentIcon {
    background-image: url('./stepper-left.svg');
}

.SequenceStepNext .SequenceComponentIcon,
.SequenceStepNextDisabled .SequenceComponentIcon,
.SequenceStepNextHighlight .SequenceComponentIcon {
    background-image: url('./stepper-right.svg');
}

.PlayDisabled.SequenceComponentIcon,
.SequenceStepNextDisabled .SequenceComponentIcon,
.SequenceStepPrevDisabled .SequenceComponentIcon,
.StopDisabled.SequenceComponentIcon {
    opacity: 0.35;
}

.SequenceComponentIcon {
    background-size: contain;
    background-repeat: no-repeat;
    width: 50%;
    padding-bottom: 50%;
}

@media (hover: hover) {
    .SequencePlay:hover,
    .SequenceStepPrev:hover,
    .SequenceStepNext:hover {
        background: rgba(36, 37, 40, 0.6);
    }
}