/* ==========================================================================
   Variables
   ========================================================================== */

/* ==========================================================================
   Base
   ========================================================================== */

.ts-app-layout {
    display: flex;
    flex-direction: row;
    color: inherit;
    height: 100%;
    width: 100%;
}

/* ==========================================================================
   Structure
   ========================================================================== */

.ts-app-layout .cell {
    flex-shrink: 0;
    background: var(--ts-page-background-default);
}

/* ==========================================================================
   Variations
   ========================================================================== */

/**
 * Fullscreen
 */

.ts-app-layout.is-fullscreen {
    height: 100vh;
    width: 100vw;
}

/**
 * Horizontal
 */

.ts-app-layout.is-horizontal {
    display: flex;
    flex-direction: row;
}

.ts-app-layout.is-horizontal > .cell:not(:last-child) {
    border-right: 1px solid var(--ts-gray-300);
}

.ts-app-layout .cell.is-horizontal {
    display: flex;
    flex-direction: row;
}

.ts-app-layout .cell.is-horizontal > .cell:not(:last-child) {
    border-right: 1px solid var(--ts-gray-300);
}

/**
 * Vertical
 */

.ts-app-layout.is-vertical {
    display: flex;
    flex-direction: column;
}

.ts-app-layout.is-vertical > .cell:not(:last-child) {
    border-bottom: 1px solid var(--ts-gray-300);
}

.ts-app-layout .cell.is-vertical {
    display: flex;
    flex-direction: column;
}

.ts-app-layout .cell.is-vertical > .cell:not(:last-child) {
    border-bottom: 1px solid var(--ts-gray-300);
}

/**
 * Scrollable
 */

.ts-app-layout .cell.is-scrollable {
    overflow-y: auto;
}

/**
 * Fluid
 */

.ts-app-layout .cell.is-fluid {
    flex: 1;
    flex-shrink: 1;
}

/**
 * Secondary
 */

.ts-app-layout .cell.is-secondary {
    background: var(--ts-page-background-secondary);
}

/**
 * Tertiary
 */

.ts-app-layout .cell.is-tertiary {
    background: var(--ts-page-background-tertiary);
}
