.DragRow {
    background: white;
    box-shadow: 0 0 5px 2px rgba(0, 0, 0, .25);

    &-id-cell {
        width: 30px;
    }

    .DragArrows {
        visibility: visible;
    }

    .DragArrowsWhite {
        fill: var(--white);
    }
}

.SelectedDragRow {
    display: flex;
    flex-flow: row nowrap;
    font-size: 13px;
    font-weight: bold;
    height: 40px;

    &-track-number {
        flex: 0 1 auto;
        padding: 8px;
        width: 30px;
    }
    &-track-name {
        flex: 1 1 auto;
        padding: 8px;
    }

    &-with-shadow {
        background-color: var(--gray-100);
        color: var(--gray-900);
        display: flex;
        filter: drop-shadow(0 0 5px rgba(0, 0, 0, .25));
        flex: 1 1 auto;
        flex-flow: row nowrap;
        line-height: 1.43;
        z-index: 1;

        & .TrackRowCheckbox {
            margin-top: 8px;
        }
    }

    & .DragArrows {
        margin-right: 5px;
        margin-top: 7px;
        visibility: visible;
    }
}

.TriangleWithShadow {
    position: relative;

    &::after {
        border-bottom: 20px solid transparent;
        border-left: 15px solid var(--gray-100);
        border-top: 20px solid transparent;
        content: "";
        position: absolute;
    }
}