// colors
$white: #ffffff;
$off-white: #fdfdfd;
$light-gray: #dfdfdf;
$medium-gray: #9f9f9f;
$dark-gray: #323232;
$black: #000000;
$light-blue: #bdddf5;
$light-blue-transparent: #bdddf590;
$medium-blue: #4476f7;

$medium-blue-transparent: #4477f733;

$medium-blue-alt: #4476f73d;
$pink: #e0217d;
$yellow: #f5d747;

$close-red: #e48282;

$drop-shadow: '#32323215';

//popup
$success-green: #4bb543;
$error-red: #ff9494;

// background
$hover-background: rgba(0, 0, 0, 0.2);
$modal-background: rgba(0, 0, 0, 0.3);

// sizes
$xsmall: 20px;
$small: 30px;
$medium: 40px;
$large: 50px;

// text-sizes
$icon-fontSize: 15px;
$large-fontSize: 15px;
$medium-fontSize: 11px;
$small-fontSize: 9px;
$xsmall-fontSize: 7px;

// fonts
$default-font: 'Roboto', Verdana, sans-serif;

//padding
$minimum-padding: 4px;
$medium-padding: 16px;
$large-padding: 32px;

//icon sizes
$icon-size: 28px;

// fonts
$sans-serif: 'Roboto', sans-serif;
$large-header: 16px;
$body-text: 12px;
$small-text: 9px;
// $sans-serif: "Roboto Slab", sans-serif;

// misc values
$search-thumnail-size: 130px;
$topbar-height: 50px;
$antimodemenu-height: 36px;

// dragged items
$contextMenu-zindex: 100000; // context menu shows up over everything
$radialMenu-zindex: 100000; // context menu shows up over everything

// borders
$standard-border: solid 1px #9f9f9f;
$padding: 0px 5px;
// border radius
$standard-border-radius: 5px;

// shadow
$standard-shadow: 0px 3px 4px rgba(0, 0, 0, 0.3);
$standard-button-shadow:
    rgb(0 0 0 / 20%) 0px 2px 4px -1px,
    rgb(0 0 0 / 14%) 0px 4px 5px 0px,
    rgb(0 0 0 / 12%) 0px 1px 10px 0px;

$dashboardselector-height: 32px;
$mainTextInput-zindex: 999; // then text input overlay so that it's context menu will appear over decorations, etc
$docDecorations-zindex: 998; // then doc decorations appear over everything else
$remoteCursors-zindex: 997; // ... not sure what level the remote cursors should go -- is this right?
$COLLECTION_BORDER_WIDTH: 0;
$SCHEMA_DIVIDER_WIDTH: 4;
$MINIMIZED_ICON_SIZE: 24;
$MAX_ROW_HEIGHT: 44px;
$DFLT_IMAGE_NATIVE_DIM: 900px;
$LEFT_MENU_WIDTH: 60px;
$TREE_BULLET_WIDTH: 20px;

:export {
    contextMenuZindex: $contextMenu-zindex;
    SCHEMA_DIVIDER_WIDTH: $SCHEMA_DIVIDER_WIDTH;
    COLLECTION_BORDER_WIDTH: $COLLECTION_BORDER_WIDTH;
    MINIMIZED_ICON_SIZE: $MINIMIZED_ICON_SIZE;
    MAX_ROW_HEIGHT: $MAX_ROW_HEIGHT;
    SEARCH_THUMBNAIL_SIZE: $search-thumnail-size;
    ANTIMODEMENU_HEIGHT: $antimodemenu-height;
    DASHBOARD_SELECTOR_HEIGHT: $dashboardselector-height;
    DFLT_IMAGE_NATIVE_DIM: $DFLT_IMAGE_NATIVE_DIM;
    LEFT_MENU_WIDTH: $LEFT_MENU_WIDTH;
    TREE_BULLET_WIDTH: $TREE_BULLET_WIDTH;
}

.form-wrapper {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 0px;
    padding-bottom: 5px;

    .formLabel {
        display: flex;
        font-family: $default-font;
        text-transform: uppercase;
        opacity: 0.8;
        min-width: 'fit-content';
    }

    &.left {
        flex-direction: row;
        align-items: center;
        gap: 3px;

        .formLabel {
            text-align: left;
        }
    }

    &.right {
        flex-direction: row-reverse;
        justify-content: flex-end;
        align-items: center;
        gap: 3px;

        .formLabel {
            text-align: right;
        }
    }

    &.top {
        flex-direction: column;
        gap: 1px;
    }

    &.top-start {
        flex-direction: column;
        align-items: flex-start;
    }

    &.top-end {
        flex-direction: column;
        align-items: flex-end;
    }
}