.status-slider { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 56px; &__line { background-image: linear-gradient(to right, #037dd6, #d73a49); height: 4px; width: 100%; border-radius: 100px; display: block; } &__label { font-size: 10px; font-weight: bold; margin-top: 4px; } &__arrow-border { width: 0; height: 0; border-left: 10px solid transparent; border-right: 10px solid transparent; border-top: 10px solid white; position: relative; margin-bottom: -2px; } &__arrow { width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 5px solid black; position: absolute; bottom: 3px; left: -5px; } }