.gmage-editor-angle-picker {
    width: 100px;
    height: 337px;
    display: flex;
    flex-direction: column;
    cursor: ns-resize;
    overflow: hidden;
    text-align: center;
    z-index: 99;
    font-size: 12px;
    margin-left: 10px;

    &__part {
        width: 70px;
        height: 150px;
        overflow: hidden;
        display: flex;
        justify-content: space-around;

        &_mid {
            height: 36px;
        }
        &_bottom {
            mask-image: -webkit-gradient(
                linear,
                center top,
                center bottom,
                color-stop(0.8, rgba(0, 0, 0, 1)),
                color-stop(1, rgba(0, 0, 0, 0.1))
            );

            .gmage-editor-angle-picker__angle-list {
                margin-top: -10px;
            }
        }
        mask-image: -webkit-gradient(
            linear,
            center top,
            center bottom,
            color-stop(0, rgba(0, 0, 0, 0.1)),
            color-stop(0.2, rgba(0, 0, 0, 1))
        );
    }

    &__current-angle {
        width: 35px;
        display: flex;
        align-content: center;
        justify-items: center;
        align-items: center;
        transition: transform 0.2s;
        font-weight: bold;
        font-size: 14px;
        margin-left: -2px;
    }

    &__angle-list {
        list-style: none;
    }

    .dot {
        background: repeating-linear-gradient(
            transparent,
            transparent 2px,
            #333 2px,
            #333 4px,
            transparent 4px,
            transparent 6px
        );
        height: 100%;
        width: 4px;
    }

    .angle-list__item {
        margin-bottom: 43px;
        color: #666;
        line-height: 10px;
    }

    .nw-arrow {
        height: 36px;
        width: 30px;
        margin-left: -15px;
        background: svg-load('../styles/assets/svg/nw-arrow.svg', fill=#000)
            no-repeat center center;
    }
}