@import "~@dnnsoftware/dnn-react-common/styles/index";
.role-user-row {
    width: 100%;
    float: left;
    padding: 13px 20px;
    box-sizing: border-box;
    &:not(:last-child) {
        border-bottom: 1px solid @alto;
    }
    div.edit-row a {
        display: inline-block;
    }
    .dnn-grid-cell {
        box-sizing: border-box;
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;

        .actions {
            float: right;
            box-sizing: border-box;
            height: 20px;
            text-align: right;
            & > div {
                text-align: right;
            }
            // &:h    over {
            //     span {
            //         float: right;
            //         .dnn-day-picker {
            //             .calendar-icon {
            //                 display: block;
            //             }
            //         }
            //     }
            // }
            span {
                float: right;
                .dnn-day-picker {
                    height: 19px;
                    .calendar-icon {
                        opacity: 0;
                        width: 19px;
                        height: 19px;
                        &.active {
                            opacity: 1;
                        }
                    }
                }
                a {
                    svg {
                        width: 23px;
                        height: 23px;
                    }
                }
            }
            a {
                float: right;
                opacity: 0;
            }
            &:hover {
                a {
                    display: inline-block;
                }
            }
            div.edit-row a {
                display: inline-block;
            }
        }
    }
    .dnn-grid-cell:last-child {
        overflow: visible;
    }
    &:hover {
        .dnn-grid-cell {
            .actions {
                span {
                    float: right;
                    .dnn-day-picker {
                        .calendar-icon {
                            opacity: 1;
                        }
                    }
                }
                a {
                    opacity: 1;
                }
            }
        }
    }
}