/* iOS Cordova Tweak */
.device-cordova.device-ios
  height 100vh

/* Disable Android Chrome pull-to-refresh */
html
  overscroll-behavior-y contain

/* Fixes for desktops */
.device-desktop
  --f7-navbar-title-line-height 1.3
  --f7-navbar-subtitle-line-height 1.3
  --f7-subnavbar-title-line-height 1.3
  --f7-list-item-header-line-height 1.3
  --f7-label-line-height 1.3
  --f7-list-item-after-line-height 1.3

  // disable all searchbar backdrops on desktop devices
  .searchbar-backdrop
    display none

.no-page-transitions
  .smart-select-popup.popup.modal-in, .smart-select-popup.popup.modal-out
    transition-duration 1ms

/* Custom color theme properties */
:root
  --f7-theme-color #e64a19
  --f7-theme-color-rgb 230, 74, 25
  --f7-theme-color-shade #c13e15
  --f7-theme-color-tint #ea673e

:root.theme-filled,
:root .theme-filled
  .subnavbar.toolbar-top
    --f7-bars-bg-color var(--f7-theme-color)
    --f7-bars-bg-color-rgb var(--f7-theme-color-rgb)
    --f7-bars-translucent-opacity 0.9
    --f7-bars-text-color #fff
    --f7-bars-link-color #fff
    --f7-navbar-subtitle-text-color rgba(255,255,255,0.85)
    --f7-bars-border-color transparent

  // .toolbar.toolbar-top
  // --f7-bars-bg-color var(--f7-theme-color)
  // --f7-bars-bg-color-rgb var(--f7-theme-color-rgb)
  // --f7-bars-translucent-opacity 0.9
  // --f7-bars-text-color #fff
  // --f7-bars-link-color #fff
  // --f7-bars-border-color transparent

  .tabbar.toolbar-top
    --f7-bars-bg-color var(--f7-theme-color)
    --f7-bars-bg-color-rgb var(--f7-theme-color-rgb)
    --f7-bars-translucent-opacity 0.9
    --f7-bars-text-color #fff
    --f7-bars-link-color #fff
    --f7-navbar-subtitle-text-color rgba(255,255,255,0.85)
    --f7-bars-border-color transparent
    --f7-tabbar-link-active-color #fff
    --f7-tabbar-link-inactive-color rgba(255,255,255,0.54)
    --f7-tabbar-link-active-border-color #fff

  .navbar
    --f7-bars-bg-color var(--f7-theme-color)
    --f7-bars-bg-color-rgb var(--f7-theme-color-rgb)
    --f7-bars-text-color #fff
    --f7-bars-translucent-opacity 0.9
    --f7-bars-link-color #fff
    --f7-navbar-large-title-text-color #fff
    --f7-bars-border-color transparent

    &.navbar-large-transparent .title-large-text
      --f7-navbar-large-title-text-color #000

    &.navbar-large-transparent:not(.navbar-large-collapsed)
      --f7-bars-link-color var(--f7-theme-color)

  --f7-navbar-subtitle-text-color rgba(255,255,255,0.85)
  --f7-navbar-border-color transparent
  --f7-sheet-border-color transparent
  .searchbar
    --f7-searchbar-input-bg-color #fff
    input
      --f7-searchbar-input-text-color #000

  .navbar-large-transparent
    --f7-navbar-large-title-text-color #000

    --r 230
    --g 74
    --b 25
    --progress var(--f7-navbar-large-collapse-progress)
    // --f7-bars-link-color rgb(
    //   calc(var(--r) + (255 - var(--r)) * var(--progress)),
    //   calc(var(--g) + (255 - var(--g)) * var(--progress)),
    //   calc(var(--b) + (255 - var(--b)) * var(--progress))
    // )

.md
  --f7-page-bg-color #fafafa
  --f7-page-bg-color-rgb rgb(250, 250, 250)
  .list-card
    box-shadow var(--f7-elevation-1)

.home-tabs
  --f7-theme-color #2196f3

.navbar-large-hidden
  --f7-navbar-large-collapse-progress 1
  opacity 0

.navbar-large-hidden:not(.navbar-large-collapsed) .navbar-bg
  opacity 0

.toolbar.toolbar-bottom, .tabbar.tabbar-bottom
  --f7-theme-color #2196f3
  --f7-theme-color-rgb var(--f7-color-blue-rgb)
  --f7-theme-color-tint var(--f7-color-blue-tint)

.home-tabs
  --f7-theme-color #2196f3
  --f7-bars-bg-color rgb(247, 247, 248)
  --f7-bars-text-color #000
  --f7-tabbar-link-inactive-color rgba(0, 0, 0, 0.54)
  --f7-tabbar-link-active-color var(--f7-theme-color)
  text-transform none

.md .title-large-text
  font-weight bold !important

.theme-dark .home-tabs
  --f7-bars-bg-color rgb(32, 32, 33)
  --f7-bars-text-color #fff
  --f7-bars-link-color #fff
  --f7-tabbar-link-inactive-color rgba(255,255,255,0.54)


.ios .contextual-toolbar
   .delete
     --f7-bars-link-color #ff3b30

.md .contextual-toolbar
  --f7-theme-color #474747
  --f7-bars-bg-color #474747
  --f7-bars-text-color #fff
  height var(--f7-navbar-height)

.panel-left .page-content::-webkit-scrollbar
  width 0

.page-home
  .page-content::-webkit-scrollbar
    width 0

/* Left Panel right border when it is visible by breakpoint */
.panel-left.panel-in-breakpoint:before
  position absolute
  right 0
  top 0
  height 100%
  width 1px
  background rgba(0,0,0,0.1)
  content ''
  z-index 6000

/* Hide navbar link which opens left panel when it is visible by breakpoint */
.panel-left.panel-in-breakpoint ~ .view .navbar .panel-open[data-panel="left"]
  display none

/*
  Extra borders for main view and left panel for iOS theme when it behaves as panel (before breakpoint size)
*/
.ios .panel-left:not(.panel-in-breakpoint).panel-active ~ .view-main:before,
.ios .panel-left:not(.panel-in-breakpoint).panel-closing ~ .view-main:before
  position absolute
  left 0
  top 0
  height 100%
  width 1px
  background rgba(0,0,0,0.1)
  content ''
  z-index 6000

.block-narrow
  z-index auto

@media (min-width 1024px)
    .block-narrow
        display flex
        flex-direction column
        align-items center
        justify-content center

        .block
          width 720px
          max-width 100%

    .block-narrow .row
        width 720px
        max-width 100%

    .block-narrow .col
        width 720px
        max-width 100%
        display initial

@media (max-width 1023px)
  .block-narrow
    padding-left var(--f7-safe-area-left)
    padding-right var(--f7-safe-area-right)

.md .panel-in-breakpoint
  box-shadow 0 1px 10px 0 rgba(0, 0, 0, 0.3)

.page-content
  .block:first-child
    margin-top 1rem
    // &.after-big-title
    //   margin-top 1rem

.md .page-content .after-big-title
  margin-top 4.5rem

.navbar
  .title-large-text
    overflow initial

.after-big-title
  margin-top 5rem

.aurora .after-big-title
  margin-top 5rem !important

// Remove the borders and background for admin links in sidebar
.list.admin-links
  ul
    background transparent !important
  ul:before
    display none !important
  ul:after
    display none !important
  .item-inner:after
    display none !important
  .menu-sublinks
    .item-content
      padding-left calc(2*var(--f7-list-item-padding-horizontal) + var(--f7-safe-area-left))

.item-initial
  color #c0c0c0
  font-size 32px
  font-weight lighter
  height 32px
  width 32px
  text-align center
  line-height 32px

#framework7-root:not(.theme-dark) .page-home:not(.standard-background),
#framework7-root:not(.theme-dark) .page-about:not(.standard-background),
#framework7-root:not(.theme-dark) .page-addon-store:not(.standard-background),
#framework7-root:not(.theme-dark) .page-addon-details:not(.standard-background),
//#framework7-root:not(.theme-dark) .page-settings
  --f7-page-bg-color #fff

// disable blur on card backdrop (poor performance - update: seems fixed)
// .card-backdrop
//   background rgba(0,0,0,0.2)

// .card-backdrop-in
//   animation card-backdrop-fade-in 400ms forwards
//   pointer-events auto

// .card-backdrop-out
//   animation card-backdrop-fade-out 400ms forwards


// Disable user select causing distracting text selection upon long press on phones/tablets
.disable-user-select
  user-select none

// Disable user dragging of background images in canvas layouts
.disable-user-drag
  user-drag none
