html,
body,
.container {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    min-width: 320px;
}

/* .be.bce.bce * {
    font-family: 'Courier New', monospace;
} */

// NOTE: This codepen uses https://codepen.io/box-platform/pen/xBRLmP for static assets and authentication. The token used is a readonly token accessing public data in a demo enterprise.

// How to use this CodePen:
// 1. Get started with Box Platform and create an application: https://developer.box.com/docs/getting-started-box-platform

// 2. Generate an access token using an SDK or use a developer token from https://app.box.com/developers/console/ -> your application -> configuration in the left sidebar -> Generate Developer Token. See https://developer.box.com/docs/special-scopes-for-box-ui-elements for various scopes you can use for the file picker.

// 3. Whitelist 'https://s.codepen.io' in your CORS allowed origins in https://app.box.com/developers/console/ -> your application -> configuration in the left sidebar -> CORS Domains

// 4. Choose a folder ID or use '0' for the root folder.

// 5. Enter your access token below, replacing the existing access token. Replace the folder ID with yours from step 4.

// Token names can be written in a flatten structure using kebab case
const theme1 = {
    tokens: {
        "background-background": "#dcf1ff",
        "body-default-semibold-font-size": "0.75rem",
        "body-default-font-family": "Courier New",
        "body-default-font-size": "0.75rem",
        "caption-default-font-family": "Courier New",
        "border-search-border": "#0a3e74",
        "border-search-border-hover": "orange",
        "surface-cta-surface-icon": "#0a3e74",
        "surface-cta-surface-icon-hover": "lightgreen",
        "surface-sliderthumb-surface": "pink",
        "surface-sliderthumb-surface-hover": "orange",
        "icon-cta-icon": "lightgray",
        "icon-cta-icon-hover": "white",
        "surface-tooltip-surface": "red",
        "text-text-on-light": "#0a3e74",
        "radius-7": "8px",
        "radius-2": "50px",
    }
};

// Or the token names can be nested in the same structure as in storybook demo
const theme2 = {
    tokens: {
        Background: {
            background: "blue",
        }
    }
};

const contentExplorer = new Box.ContentExplorer();
contentExplorer.show(configData.FOLDER_ID, configData.ACCESS_TOKEN, {
    container: ".container",
    theme: theme1,
});