@noahvPrefixCls: noahv;
@noahv-weight-primary-color: #3A62CA;

.@{noahvPrefixCls}-duty-table {

    .date-picker {
        font-size: 0;

        .change-btn {
            display: inline-block;
            width: 30px;
            height: 30px;
            line-height: 30px;
            background-color: @noahv-weight-primary-color;
            vertical-align: top;
            text-align: center;
            font-size: 14px;
            color: #fff;
            cursor: pointer;

            .ivu-icon {
                font-weight: bold;
            }
        }

        .change-btn-disabled {
            color: #fff;
            background-color: #999;
            cursor: not-allowed;
        }

        .select-year, .select-month {
            display: inline-block;
            width: 74px;
            height: 30px;
        }
    }

    .date-container {
        margin-top: 13px;

        .week-header {
            display: flex;

            .week-date {
                flex: 1;
                border-right: 1px solid #fff;
                height: 40px;
                line-height: 40px;
                text-align: center;
                color: #333;
                background-color: #EEF1FA;

                &:last-of-type {
                    border-right: 1px solid transparent;
                }
            }
        }

        .date-body {
            .data-row {
                .date-col {
                    display: flex;
                    border-bottom: 1px solid #E7E9F0;
                    font-size: 0;

                    .col-item {
                        flex: 1;
                        height: 40px;
                        line-height: 40px;
                        text-align: center;
                        border-right: 1px solid #E7E9F0;
                        font-size: 12px;
                        color: #333;

                        &:last-of-type {
                            border-right: 1px solid transparent;
                        }
                    }
                }

                .name-col {
                    position: relative;
                    display: flex;
                    height: 40px;
                    padding: 6px 0;
                    border-bottom: 1px solid #E7E9F0;

                    .col-item {
                        display: inline-block;
                        height: 28px;
                        line-height: 28px;
                        text-align: center;
                        color: #fff;
                        white-space: nowrap;
                        overflow: hidden;
                        text-overflow: ellipsis;
                    }

                    .col-item-no-data {
                        background-color: #EEF1FA;
                        color: #999;
                    }

                    .col-item-no-work {
                        background-color: #EEF1FA;
                        color: #999;
                    }

                    .time-line {
                        position: absolute;
                        bottom: -1px;
                        left: 0;
                        height: 40px;

                        span {
                            position: absolute;
                            transform: translate(-50%, -100%);
                            color: #D0021B;
                            line-height: 16px;
                        }

                        &::after {
                            position: absolute;
                            display: inline-block;
                            content: '';
                            width: 1px;
                            height: 40px;
                            background-color: #D0021B;
                        }
                    }
                }
            }
        }
    }
}
