/* Copyright: Ankitects Pty Ltd and contributors
 * License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html */

@use 'base';
@use 'scrollbar';

.nightMode {
    @include scrollbar.night-mode;
}

#fields {
    display: flex;
    overflow-x: hidden;
    flex-direction: column;
    margin: 3px 0;
}

.editor-field {
    margin: 3px;
    border-radius: 5px;
    border: 1px solid var(--border-color);

    --border-color: var(--border);

    &:focus-within {
        box-shadow: 0 0 0 3px var(--focus-shadow);

        --border-color: var(--focus-border);
    }
}

.field {
    position: relative;

    background: var(--frame-bg);
    border-radius: 0 0 5px 5px;

    &.dupe {
        // this works around the background colour persisting in copy+paste
        // (https://github.com/ankitects/anki/pull/1278)
        background-image: linear-gradient(var(--flag1-bg), var(--flag1-bg));
    }
}

.fname {
    border-width: 0 0 1px;
    border-style: dashed;
    border-color: var(--border-color);
    border-radius: 5px 5px 0 0;

    padding: 0px 6px;
}

.fieldname {
    user-select: none;
}

#dupes,
#cloze-hint {
    position: sticky;
    bottom: 0;

    text-align: center;
    background-color: var(--window-bg);

    &.is-inactive {
        display: none;
    }

    a {
        color: var(--link);
    }
}

.icon > svg {
    fill: var(--text-fg);
}

.pin-icon {
    cursor: pointer;

    &.is-inactive {
        opacity: 0.2;
    }

    &.icon--hover {
        opacity: 0.5;
    }
}

@import "ts/sass/codemirror/lib/codemirror";
@import "ts/sass/codemirror/theme/monokai";
@import "ts/sass/codemirror/addon/fold/foldgutter";

.CodeMirror {
    height: auto;
    border-radius: 0 0 5px 5px;
    padding: 6px 0;
}