/**
 * Styles common to multiple notebook builder widgets
 */
.notebook-builder-widget {
    border: 3px solid var(--viewed-content);
    background-color: var(--viewed-content);
    border-radius: 25px;
    margin-top: 10px;
    margin-bottom: 10px;
    padding: 20px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

.heading-container {
    display: flex;
    justify-content: space-between;
}

.widget-main {
    padding: 10px;
    margin-right: 10px;
    width: 100%;
}

.widget-controls {
    display: flex;
    flex-direction: column;
    border: 3px solid white;
    border-radius: 25px;
    background-color: white;
    justify-content: space-around;
}

.widget-controls input[type="button"] {
    margin: 10px;
}

.interactive-container {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    margin-top: 10px;
}

.filename-input {
    text-align: right;
}

/**
 * Selector widget styles
 */
.selector-widget {
    display: flex;
    flex-direction: column;
}

.selector-widget .interactive-container {
    justify-content: space-evenly;
}

/**
 * Markdown widget styles
 */
.markdown-widget textarea {
    width: 100%;
    margin-right: 10px;
    min-height: 75px;
}

/**
 * Short answer widget styles
 */
.short-answer-widget .interactive-container {
    flex-direction: column;
}

.short-answer-widget .basic-options {
    display: flex;
    justify-content: space-between;
    margin-top: 15px;
}

.short-answer-widget .type-options {
    display: flex;
}

.short-answer-widget .type-options :first-child {
    margin-right: 15px;
}

.short-answer-widget .initial-value-div {
    max-width: 1000px;
}

.short-answer-widget .initial-value-msg {
    margin-bottom: 10px;
}

.short-answer-widget hr {
    width: 90%;
    align-self: center;
}

.short-answer-widget i {
    font-size: 80%;
}

/* stylelint-disable-next-line selector-class-pattern */
.CodeMirror {
    background-color: var(--standard-input-background) !important;
    border: 1px solid var(--standard-light-gray) !important;
    border-radius: 4px !important;
    vertical-align: middle !important;
}

/**
 * Multiple choice widget styles
 */
.mc-table {
    width: 100%;
    margin-right: 10px;
}

.mc-table .mc-row {
    display: flex;
    margin-top: 15px;
}

.mc-table .mc-col {
    flex: 1;
}

.mc-table .mc-col-center {
    flex: 4;
}

.mc-table .mc-header {
    font-weight: bold;
}

.mc-table .value-input,
.mc-table .entered-value-input {
    width: 95%;
}

.mc-table .description-input,
.mc-table .entered-description-input {
    width: 95%;
    height: 80px;
}

.mc-table .mc-buttons {
    display: flex;
    flex-direction: column;
}

.multiple-choice-config {
    display: flex;
    align-items: center;
}

.multiple-choice-config fieldset {
    display: flex;
    flex-direction: column;
    text-align: right;
}

/**
 * Image widget styles
 */
.image-widget .interactive-container {
    flex-direction: column;
}

.image-widget .image-container {
    text-align: center;
}

.image-widget img {
    max-width: 50%;
}

.image-widget .image-options {
    display: flex;
    width: 100%;
    margin-top: 20px;
}

.image-widget .image-col-small {
    flex: 1;
    margin-right: 10px;
}

.image-widget .image-col-large {
    flex: 7;
}

.image-widget .image-options input,
.image-widget .image-options textarea {
    display: block;
    width: 100%;
}

/**
 * Form options widget styles
 */
.form-options-widget {
    border: 3px solid var(--notebook-builder-form-options-orange);
    background-color: var(--notebook-builder-form-options-orange);
}

.form-options-widget,
.form-options-widget .interactive-container {
    flex-direction: column;
}

.form-options-widget .buttons {
    display: flex;
    margin-bottom: 15px;
}

/**
 * Itempool item widget styles
 */
.itempool-widget,
.itempool-selector {
    border: 3px solid var(--notebook-builder-itempool-green);
    background-color: var(--notebook-builder-itempool-green);
}

.itempool-widget .selector-widget,
.itempool-widget .multiple-choice-widget,
.itempool-widget .image-widget,
.itempool-widget .markdown-widget,
.itempool-widget .short-answer-widget {
    border: 3px solid var(--notebook-builder-itempool-green);
    background-color: var(--notebook-builder-itempool-green);
}

.itempool-widget .group-buttons {
    display: flex;
    justify-content: space-around;
}

.itempool-widget .interactive-container {
    flex-direction: column;
}

.itempool-widget .selector-widget {
    padding: 5px 20px;
}

.itempool-widget .selector-widget .interactive-container {
    flex-direction: row;
}

.itempool-widget .multiple-choice-widget .interactive-container {
    flex-direction: row;
}

/**
 * Notebook item widget styles
 */
/* stylelint-disable-next-line no-descending-specificity */
.item-widget .interactive-container {
    flex-direction: column;
}

.item-widget .item-options {
    display: flex;
    justify-content: space-between;
}

.item-widget p {
    margin: 10px 0;
}

.item-widget .from-pool-div label {
    float: left;
    clear: both;
}
