@import "../../../../assets/less/core/boot.less";

@color-permissioneditor-section-border: @primary-border;
@color-permissioneditor-permission-border: @primary-border;

.permissioneditor {
    position: relative;
    border-radius: @border-radius-base;
    background: @input-bg;
    border: 1px solid @input-border;

    &.control-disabled {
        .permissions-overlay {
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            background: rgba(0,0,0,.05);
            cursor: not-allowed;
        }

        > ul {
            opacity: .75;
        }
    }

    li.permission-section {
        .section-content {
            color: @heading-color;
            font-weight: normal;
            display: flex;
        }

        .tab-title {
            font-size: @font-size-base;
            font-weight: 600;
            padding: 7px 1rem;
        }

        .tab-controls {
            padding: 3px;
            font-size: 0;
            white-space: nowrap;
            text-align: right;
            flex-grow: 1;
        }
    }

    li.permission-item {
        .item-content {
            display: flex;
            padding: .6rem .4rem;

            &:hover {
                color: var(--bs-table-hover-color);
                background-color: var(--bs-table-hover-bg);

                &.item-name {
                    color: var(--bs-table-hover-color) !important;
                }
            }
        }

        .item-value {
            white-space: nowrap;
            padding-left: .5rem;
            padding-right: .5rem;

            .form-check-input {
                margin-left: .1rem;
                margin-right: .1rem;
            }
        }

        .item-name {
            cursor: pointer;
            color: @secondary-color;
            width: 100%;
        }
    }

    p.comment {
        margin-top: 5px;
        margin-bottom: 0;

        &:empty {
            display: none;
        }
    }

    .form-check-input {
        &[type=radio][data-radio-color=green]:checked  {
            background-color: @brand-success;
            border-color: @brand-success;
        }

        &[type=radio][data-radio-color=red]:checked  {
            background-color: @brand-danger;
            border-color: @brand-danger;
        }
    }

    > ul {
        list-style: none;
        padding: 0;
        margin: 0;
        width: 100%;

        > li {
            border-bottom: 1px solid @color-permissioneditor-section-border;

            &:last-child {
                border-bottom: none;
            }
        }

        > li.permission-item {
            vertical-align: top;
            border-bottom-color: transparent;
            user-select: none;

            ul.child-items {
                list-style: none;
                padding-left: 2.2rem;

                .item-content {
                    margin-top: -.25rem;
                    margin-bottom: -.25rem;

                    &:before {
                        content: "└─";
                        font-size: 12px;
                        color: rgba(var(--bs-body-color-rgb), 0.6);
                        position: relative;
                        top: 1px;
                    }
                }
            }

            // First set of children
            > ul.child-items {
                padding-bottom: .25rem;
                padding-left: .8rem;
            }
        }
    }

    li.disabled {
        ul.child-items * {
            cursor: not-allowed;
        }

        ul.child-items > li > .item-content:before {
            color: rgba(var(--bs-body-color-rgb), 0.2);
        }

        > .item-content > .item-name {
            color: #AAA;
        }
    }
}