/* @settings

name: Vertical Stacked Tab Settings
id: vertical-stacked-tabs
settings:
-
  id: touch-area-left
  title: Move scroll area to the left side
  type: class-toggle
-
  id: disable-scrollbar-background
  title: Disable scrollbar background
  type: class-toggle
-
  id: scrolling-headers
  title: Disable sticky headers
  type: class-toggle
-
  id: thin-headers
  title: Enable smaller tab headers
  type: class-toggle
-
  id: disable-diagonal-bars
  title: Disable touch area bars
  type: class-toggle
-
  id: last-tab-fill
  title: Set last tab to fill the screen
  type: class-toggle
-
  id: touch-margin
  title: Touch background width
  description: How wide the side scrollbar is (rem)
  type: variable-number-slider
  default: 4
  min: 0
  max: 10
  step: 1
  format: rem
-
  id: workspace-page-height
  title: Page height
  description: How tall each page is
  type: variable-number-slider
  default: 80
  min: 25
  max: 100
  step: 5
-
  id: touch-background-light
  title: Light mode touch area color
  type: variable-color
  opacity: false
  format: hex
  default: '#aaa'
-
  id: touch-background-dark
  title: Dark mode touch area color
  type: variable-color
  opacity: false
  format: hex
  default: '#444'
-
  id: test-header-information
  title: Info
  type: heading
  level: 1
  collapsed: true
-
  id: vertical-stacked-tabs-description
  title:
  description: |
    Created by **FireIsGood#0733** in the Obsidian Members Group Discord. Ask in the `#appearance` channel for support.
    
    It is intended to make mobile stacked tabs appear vertical. ඞ
  type: info-text
  markdown: true
*/


/** Theme settings **/

/* Global variables */
body {
  --diagonal-bars: repeating-linear-gradient(-45deg, rgba(0,0,0,0.1) 0px 4px, transparent 4px 12px);
}
.theme-light {
  --touch-background: var(--touch-background-light, #aaa);
}
.theme-dark {
  --touch-background: var(--touch-background-dark, #444);
}
/* Left handed mode */
.is-mobile.touch-area-left .mod-stacked .workspace-tab-container > * {
  margin-left: auto;
}
/*  */
/* Thin headers */
.is-mobile.thin-headers {
  --tab-header-height: 30px;
  --tab-header-inline-padding: 6px;
}
.is-mobile:not(.thin-headers) {
  --tab-header-height: 50px;
}
/* Diagonal bars */
body:not(.disable-diagonal-bars).is-mobile .workspace-tab-container {
  background-image: var(--diagonal-bars);
}
body:not(.disable-diagonal-bars).touch-area-left.is-mobile .workspace-tab-container {
  background-image: linear-gradient(to left, var(--background-primary) 50%, transparent 50%),
  var(--diagonal-bars);
}


/** Main styles **/

/* Set page width */
.is-mobile .mod-vertical .mod-stacked .workspace-leaf,
.is-mobile .mod-stacked .workspace-tab-header {
  width: calc(100% - var(--touch-margin, 4rem) - var(--scrollbar-width, 0px)) !important;
  max-width: unset !important;
  min-width: unset !important;
  left: unset !important;
  right: unset !important;
}
.is-mobile.touch-area-left {
  --scrollbar-width: 12px;
}
/* Set page height */
.is-mobile .mod-vertical .mod-stacked .workspace-leaf {
  height: calc(var(--workspace-page-height, 80) * 1% - var(--tab-header-height) - 2px) !important;
}
.is-mobile.last-tab-fill .mod-vertical .mod-stacked .workspace-leaf:last-child {
  height: calc(100% - var(--tab-header-height) - 2px) !important;
}
/* Set workspace direction */
.is-mobile .workspace .mod-root .workspace-tabs.mod-stacked .workspace-tab-container {
  flex-direction: column;
  overflow: hidden auto;
  background-color: var(--touch-background);
}
.is-mobile.disable-scrollbar-background .workspace .mod-root .workspace-tabs.mod-stacked .workspace-tab-container {
  background-color: unset;
  background-image: unset;
}


/** Misc changes **/

/* Add borders */
.is-mobile .mod-stacked .workspace-tab-container > .workspace-tab-header {
  border-top: 2px solid var(--background-secondary);
  box-shadow: 0 -4px 4px -2px rgba(0,0,0,.2) !important;
}
.is-mobile:not(.touch-area-left) .mod-stacked .workspace-tab-container > * {
  border-right: 2px solid var(--background-secondary);
}
.is-mobile.touch-area-left .mod-stacked .workspace-tab-container > * {
  border-left: 2px solid var(--background-secondary);
}
/* Fix hidden tabs */
.is-mobile .workspace .mod-root .workspace-tabs.mod-stacked .workspace-tab-container .workspace-leaf.is-hidden > * {
  display: initial;
}
/* Fix headers */
.is-mobile .mod-stacked .workspace-tab-header-inner {
  flex-direction: row !important;
  writing-mode: horizontal-tb;
  padding: 4px var(--tab-header-inline-padding,10px) !important;
  height: calc(var(--tab-header-height) - 2px);
}
.is-mobile .mod-stacked .workspace-tab-header-inner-title {
  padding-inline: auto !important;
}
/* Stack tab headers */
.is-mobile:not(.scrolling-headers) .mod-stacked .workspace-tab-container > .workspace-tab-header {
  top: calc((var(--tab-index) - 1) * var(--tab-header-height));
}
.is-mobile:not(.scrolling-headers) .mod-stacked .workspace-tab-container > .workspace-leaf {
  top: calc(var(--tab-index) * var(--tab-header-height));
}
/* Fix over scrolling */
.markdown-preview-view {
  overscroll-behavior: contain;
}

/* Supports up to 25 tabs */
.workspace-tab-header:nth-child(1) {--tab-index: 1}
.workspace-leaf:nth-child(2) {--tab-index: 1}
.workspace-tab-header:nth-child(3) {--tab-index: 2}
.workspace-leaf:nth-child(4) {--tab-index: 2}
.workspace-tab-header:nth-child(5) {--tab-index: 3}
.workspace-leaf:nth-child(6) {--tab-index: 3}
.workspace-tab-header:nth-child(7) {--tab-index: 4}
.workspace-leaf:nth-child(8) {--tab-index: 4}
.workspace-tab-header:nth-child(9) {--tab-index: 5}
.workspace-leaf:nth-child(10) {--tab-index: 5}
.workspace-tab-header:nth-child(11) {--tab-index: 6}
.workspace-leaf:nth-child(12) {--tab-index: 6}
.workspace-tab-header:nth-child(13) {--tab-index: 7}
.workspace-leaf:nth-child(14) {--tab-index: 7}
.workspace-tab-header:nth-child(15) {--tab-index: 8}
.workspace-leaf:nth-child(16) {--tab-index: 8}
.workspace-tab-header:nth-child(17) {--tab-index: 9}
.workspace-leaf:nth-child(18) {--tab-index: 9}
.workspace-tab-header:nth-child(19) {--tab-index: 10}
.workspace-leaf:nth-child(20) {--tab-index: 10}
.workspace-tab-header:nth-child(21) {--tab-index: 11}
.workspace-leaf:nth-child(22) {--tab-index: 11}
.workspace-tab-header:nth-child(23) {--tab-index: 12}
.workspace-leaf:nth-child(24) {--tab-index: 12}
.workspace-tab-header:nth-child(25) {--tab-index: 13}
.workspace-leaf:nth-child(26) {--tab-index: 13}
.workspace-tab-header:nth-child(27) {--tab-index: 14}
.workspace-leaf:nth-child(28) {--tab-index: 14}
.workspace-tab-header:nth-child(29) {--tab-index: 15}
.workspace-leaf:nth-child(30) {--tab-index: 15}
.workspace-tab-header:nth-child(31) {--tab-index: 16}
.workspace-leaf:nth-child(32) {--tab-index: 16}
.workspace-tab-header:nth-child(33) {--tab-index: 17}
.workspace-leaf:nth-child(34) {--tab-index: 17}
.workspace-tab-header:nth-child(35) {--tab-index: 18}
.workspace-leaf:nth-child(36) {--tab-index: 18}
.workspace-tab-header:nth-child(37) {--tab-index: 19}
.workspace-leaf:nth-child(38) {--tab-index: 19}
.workspace-tab-header:nth-child(39) {--tab-index: 20}
.workspace-leaf:nth-child(40) {--tab-index: 20}
.workspace-tab-header:nth-child(41) {--tab-index: 21}
.workspace-leaf:nth-child(42) {--tab-index: 21}
.workspace-tab-header:nth-child(43) {--tab-index: 22}
.workspace-leaf:nth-child(44) {--tab-index: 22}
.workspace-tab-header:nth-child(45) {--tab-index: 23}
.workspace-leaf:nth-child(46) {--tab-index: 23}
.workspace-tab-header:nth-child(47) {--tab-index: 24}
.workspace-leaf:nth-child(48) {--tab-index: 24}
.workspace-tab-header:nth-child(49) {--tab-index: 25}
.workspace-leaf:nth-child(50) {--tab-index: 25}