@import url("../generic/colors.css");
@import url("../generic/dimensions.css");

/* TEXT EDITOR  */

.simple-text-editor-textarea {
    resize: none;
}

/* BUTTONS */

.workbook-element.button-line {
    margin: 0 auto;
    gap: var(--space-md);
    display: flex;
}

/* Sorting exercise */

.sorting-interaction--inline { padding: var(--space-md) 0; }

.sorting-interaction__controls {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-md);
}

.sorting-interaction__error-count,
.sorting-exercise-fullscreen__session-errors {
    color: var(--color-gray-10);
    font-size: 0.92rem;
}

.sorting-exercise-fullscreen__session-errors { margin-right: auto; font-weight: 600; }

.sorting-exercise-fullscreen {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    width: 100%;
    height: 100%;
    min-height: 0;
    padding: var(--space-md);
    box-sizing: border-box;
}

.sorting-exercise-fullscreen__toolbar { display: flex; align-items: center; gap: var(--space-md); }

.sorting-fields {
    flex: 1;
    display: grid;
    gap: var(--space-md);
    overflow: auto;
    min-height: 0;
    align-content: start;
}

.sorting-fields--cols-1 { grid-template-columns: minmax(220px, 480px); justify-content: center; }
.sorting-fields--cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sorting-fields--cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.sorting-field-card {
    display: flex;
    flex-direction: column;
    min-height: 8rem;
    border: 1px solid var(--color-gray-3);
    border-radius: var(--radius-md);
    background: var(--color-gray-0);
    overflow: hidden;
}

.sorting-field-card--full-width { grid-column: 1 / -1; }

.sorting-field-card__title {
    padding: var(--space-sm) var(--space-md);
    font-weight: 700;
    border-bottom: 1px solid var(--color-gray-3);
}

.sorting-field-card__drop {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    min-height: 5rem;
    padding: var(--space-md);
    border-top: 2px dashed var(--color-gray-3);
}

.sorting-field-card__drop .sorting-item { pointer-events: none; }

.sorting-source { border-top: 1px solid var(--color-gray-3); padding-top: var(--space-md); }
.sorting-source__label { font-weight: 600; margin-bottom: var(--space-sm); }
.sorting-source__items { display: flex; flex-wrap: wrap; gap: var(--space-sm); }

.sorting-item {
    display: inline-flex;
    align-items: center;
    max-width: 100%;
    word-break: break-word;
    padding: var(--space-sm) var(--space-md);
    border: 1px solid var(--color-gray-3);
    border-radius: var(--radius-sm);
    background: var(--color-background-workarea-interactible);
}

.sorting-item--active { cursor: grab; border-color: var(--color-blue-4); }
.sorting-item--active:active { cursor: grabbing; }
.sorting-item--upcoming { opacity: 0.45; }
.sorting-item--waiting-reason { opacity: 0.75; border-style: dashed; }
.sorting-item--correct { background: var(--color-green-0); border-color: var(--color-green-4); }
.sorting-item--wrong { background: var(--color-red-0); border-color: var(--color-red-4); opacity: 0.9; }

.sorting-success-banner:not(.is-visible),
.sorting-error-popup:not(.is-visible) { display: none; }

.sorting-success-banner.is-visible {
    display: block;
    padding: var(--space-md);
    text-align: center;
    font-weight: 600;
    border-radius: var(--radius-sm);
    background: var(--color-green-0);
}

.sorting-error-popup.is-visible {
    display: flex;
    position: absolute;
    inset: 0;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.35);
    z-index: 5;
}

.sorting-error-popup__content {
    max-width: 28rem;
    margin: var(--space-md);
    padding: var(--space-lg);
    text-align: center;
    border-radius: var(--radius-md);
    background: var(--color-background-workarea-interactible);
}

.sorting-error-popup__button { margin-top: var(--space-md); }

.sorting-reason-form {
    margin-bottom: var(--space-md);
    padding: var(--space-md);
    border: 1px solid var(--color-gray-3);
    border-radius: var(--radius-md);
}

.sorting-reason-form__prompt { font-weight: 600; margin-bottom: var(--space-sm); }

.sorting-reason-form__input {
    width: 100%;
    min-height: 4rem;
    resize: vertical;
    box-sizing: border-box;
}

.sorting-reason-form__confirm-button { margin-top: var(--space-sm); }

/* Fill-in code editor (advanced CodeTaskToggle mode) */

.fill-in-code-editor {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

.fill-in-code-editor__todo-legend {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}

.fill-in-code-editor__todo-badge {
    color: var(--color-accent-error);
    font-weight: 700;
}

.fill-in-code-editor__toolbar {
    display: flex;
    justify-content: flex-end;
}

.fill-in-code-editor__reset-btn {
    padding: var(--space-sm) var(--space-md);
    font-size: 0.9rem;
}

.fill-in-code-editor__confirm-actions {
    display: flex;
    justify-content: center;
    gap: var(--space-md);
    margin-top: var(--space-md);
}

.fill-in-code-editor__confirm-reset {
    background: var(--color-background-colored-incorrect);
}

.fill-in-code-editor__mirror {
    min-height: 16rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    overflow: hidden;
}

.fill-in-code-editor__mirror .cm-editor,
.fill-in-code-editor__mirror .cm-scroller {
    min-height: 16rem;
}

@media (max-width: 640px) {
    .sorting-fields--cols-2,
    .sorting-fields--cols-3 { grid-template-columns: 1fr; }
    .sorting-field-card--full-width { grid-column: auto; }
}