// Styles for the rulebox module

.rulebox {
    border: 1px solid $grey-color-light;
    padding: 20px;
    margin: 20px 0 30px 0;

    .prompt,
    .module-type-header {
        color: $grey-color-dark;
        font-family: $header-font-family;
        font-weight: bold;
    }

    .module-type-header {
        font-size: 1em;
        margin: 10px 5px 5px 5px;
    }

    .prompt,
    .delete-module,
    .rulebuilder_modules,
    .linkbox_input,
    .metadata_input {
        display: none;
    }
    
    .editable[contenteditable="true"] { /* active editable fields */
        border-bottom: 1px dashed $grey-color-dark;
    }
    
    .editable[contenteditable="false"] { /* inactive editable fields */
        border: none;
    }
    
    // TODO: module display is set within the spreadsheet
    .rulebuilder_input .module .delete-module {
        display: none !important;
    }

    .rulebuilder {}
    .rulebuilder_input {
        overflow: hidden;
        margin: 0 0 $spacing-unit;
        text-align: left;
        min-height: 1.5em;
        .prompt {
            color: $text-color;
        }
        .module .module-info {
            display: none;
        }
    }
    .rulebuilder_list {}

    .rulebuilder_modules {
        .module .delete-module {
            display: none;
        }
    }

    .metadata_input,
    .metadata_display {
        border: 1px solid $grey-color-light;
        background-color: white;
        margin: $spacing-unit 0 15px 0;
        padding: 10px;
    }
    
    .metadata_display {
        border-radius: 6px;
        text-align: center;
    }

    .metadata_input {
        input {
            margin-bottom: $spacing-unit / 2;
        }
    }

    &.rulebox-preview {
        // this class is toggled by toggleEditMode() in rule-scrips.html
        // when preview/customize button is pressed
        
    }

    &.rulebox-edit {
        // this class is toggled by toggleEditMode() in rule-scrips.html
        // when preview/customize button is pressed
        .prompt,
        .delete-module,
        .rulebuilder_modules,
        .metadata_input {
            display: block;
        }

        .linkbox_input {
            display: inline;
        }

        .metadata_display {
            display: none;
        }

        .rulebuilder_input .module .delete-module {
            display: inline !important;
        }

        .rulebuilder {}
        .rulebuilder_input {
            &.drag-target {
                background-color: $brand-yellow;
                border-style: solid;
            }
            border: 4px dashed $brand-yellow;
            color: $text-color;
            padding: 10px 10px 10px 10px;
        }
    }
}