@use './styles/adjustments';
@use './components/icon/icon';
@use './components/widgetinputwrapper/widget-input-wrapper';
@use './widgets/arraywidget/array-widget';
@use './widgets/datewidget/date-widget';
@use './widgets/text-widget';

@font-face {
    font-family: Icon;
    font-style: normal;
    font-weight: 100 700;
    src: url(https://fonts.gstatic.com/s/materialsymbolsoutlined/v88/kJEhBvYX7BgnkSrUwT8OhrdQw4oELdPIeeII9v6oFsLjBuVY.woff2)
        format(woff2);
}

// ghostClass: "sortable-ghost",  // Class name for the drop placeholder
// chosenClass: "sortable-chosen",  // Class name for the chosen item
// dragClass: "sortable-drag",  // Class name for the dragging item

// item being dragged, only access in onStart(_, dragElement)
.sortable-chosen {
    background: var(--rje-dragged-color) !important;
}

.sortable-ghost {
    position: relative;
    background: var(--mantine-primary-color-0) !important;

    td {
        bounding-box: border-box;
        background: var(--mantine-primary-color-light);
    }

    &.drag--invalid {
        &:after {
            z-index: 1;
            content: attr(data-errormessage);
            position: absolute;
            padding: 1em;
            top: 0;
            left: 0;
            color: #fff;
        }

        td {
            background: var(--mantine-color-red-5);
        }

        td * {
            visibility: hidden;
        }
    }
}

.rje-array__items {
    .rje-drag__handle {
        cursor: pointer;
        user-select: none;
    }

    > tbody td.rje-drag__handle + td {
        padding-left: 0; // remove double padding with handlt
    }
}

p + .rje-content--with-header {
    padding-top: var(--mantine-spacing-xs);
}

.rje--selectable > div > label {
    cursor: pointer;
}

.rje--selected {
    background: rgba(41, 182, 246, 0.25);
}

tr.rje--selected > td > .rje--selected {
    background: transparent;
}

@media (max-width: 430px) {
    .rje-form textarea.mantine-Input-input,
    .rje-form input.mantine-Input-input {
        font-size: 16px;
    }
}