@import "@synerty/peek-plugin-base-js/src/styles/_mixins";
@import "@synerty/peek-plugin-base-js/src/styles/_variables";

$height: calc(100vh - 300px);

.modal-open.modal {
    overflow-y: unset;
}

.modal-body {
    overflow-y: auto;
    max-height: 85vh;
}

.modal-dialog {
    padding: $general_padding_1;
    top: $title_bar_height;
}

.scroll-outer {
    max-height: $height;
    height: $height;
    overflow-y: scroll;
}

.layer-row {
    &.child-layer {
        background-color: rgba(0, 0, 0, 0.02);
    }

    &:hover {
        background-color: rgba(0, 0, 0, 0.05);
    }
}

.layer-name-container {
    display: flex;
    align-items: center;
    min-height: 24px;
}

.tree-toggle-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    cursor: pointer;
    border-radius: 2px;
    margin-right: 4px;

    &:hover {
        background-color: rgba(0, 0, 0, 0.1);
    }
}

.expand-collapse-icon {
    font-size: 12px;
    color: #666;
    transition: transform 0.2s ease;
}

.leaf-spacer {
    width: 20px;
    height: 20px;
    margin-right: 4px;
    display: inline-block;
}

.layer-name {
    flex: 1;
    user-select: none;
    min-width: 400px;
}

.inherited-indicator {
    font-size: 0.8em;
    color: #888;
    font-style: italic;
    margin-left: 8px;
}

.checkbox-with-inherited {
    display: flex;
    align-items: center;
    gap: 8px;

    .inherited-text {
        color: #999;
        font-style: italic;
        font-size: 12px;
    }
}

// Tree connection lines (optional enhancement)
.layer-row {
    position: relative;

    &.child-layer::before {
        content: '';
        position: absolute;
        left: 12px;
        top: 0;
        bottom: 50%;
        width: 1px;
        background-color: #ddd;
    }
}

/*
.modal-backdrop {
  float: left;
  top: 0px;
  bottom:0px;
  left:0px;
  right:0px;
  background-color: $primary_dark;
}
*/