@require '~vuepress-plugin-tabs/dist/themes/default.styl'

.navbar:not(.headroom--top):not(.transparent)
    box-shadow rgba(10%,10%,10%,25%) 0 0 10px
    background-color rgba(98%, 98%, 99%, 0.9) // linear-gradient(180deg,hsla(0,0%,100%,.3),hsla(0,0%,100%,.3) 95%,rgba(0,0,0,.05) 99%,rgba(0,0,0,.04))

.homepage
    .navbar:not(.headroom)
      opacity 0
      background transparent
      color white
      border-bottom none
      box-shadow none
      .logo
        opacity 0
      .nav-dropdown
        color black
      .nav-links > .nav-item:last-child
        svg
            color white
      .dropdown-title .arrow
          border-top 6px solid #fff

.navbar
    .links
        background-color transparent !important

    .nav-dropdown
        // background-color white
        background-color rgba(98%, 98%, 99%, 0.96) !important
        box-shadow rgba(10%,10%,10%,25%) 0 0 5px

    .nav-item a
        // font-family 'Open Sans', sans-serif
        font-weight 400
        font-size 1rem

    .nav-item .dropdown-title
        // font-family 'Open Sans', sans-serif
        font-weight 400
        font-size 1rem
        color inherit !important

    .dropdown-subitem .nav-link a
        font-weight normal

    // not for docs preview!
    // .site-name
    //     display none

.dropdown-wrapper .nav-dropdown .dropdown-item h4
    margin-bottom .2rem

.sidebar-group.is-sub-group>.sidebar-heading:not(.clickable)
    opacity 1 !important

.arrow.right
    border-left: 6px solid #333 !important

.sidebar
    background-color #f7f7f7 !important
    // background linear-gradient(90deg, #fff0e0, #fff) !important

@media (min-width: 719px)
    .nav-item > a:hover, .nav-item > a.router-link-active
        border-bottom 3px solid $accentColor

@media (min-width: 720px) and (max-width: 1023px)
    .search-box input:focus
        width: 10.8rem !important // to cover the openHAB text (leaving the logo)

@media (min-width: 1024px) and (max-width: 1280px)
    .search-box input
        width: 5.7rem !important

@media (max-width: 360px)
    .search-box input:focus
        width: 9.4rem !important // to cover the openHAB text (leaving the logo)

@media (max-width: 419px)
    .search-box input:focus
        width: 4rem !important

.content:not(.custom)>h1:first-child
    font-family 'Open Sans', sans-serif
    font-weight 400

@media print
    .navbar
        display none
    .page-versions
        display none
    .page-nav
        display none
    .editLink
        display none
    .content pre
        overflow hidden !important
        white-space pre-wrap !important

.theme-default-content:not(.custom), .page-nav
    max-width 1280px !important

.page .theme-default-content:not(.custom):not(.page-nav):not(.edit-link)
    min-height 85vh !important

.page .page-edit
    display none

.logo
    width 160px
    height 35px

.nav-item > a.external:hover
    border-bottom 2px solid #ff7214

.custom-block.tip
    border-color #2196f3 !important

/* Tweaks for vuepress-plugin-tabs */

.vuepress-tabs
    .tabs-component
        .tabs-component-tab.is-active .tabs-component-tab-a
                color black
        .tabs-component-panel
            margin-top -8.4rem
            padding-top 8.4rem

@media (min-width: 700px)
    .vuepress-tabs
        .tabs-component-tab
            border solid 1px #bbb
            &.is-active
                border-bottom solid 1px #fff
                z-index 2
                transform translateY(0)
        .tabs-component-panels
            border solid 1px #bbb

@media (max-width: 699px)
    .vuepress-tabs
        .tabs-component-tabs
            border 0
            align-items center
            display flex
            justify-content flex-start
            margin-bottom -2px
            padding-left -1rem
        .tabs-component-tab
            background-color #fff
            border solid 1px #bbb
            border-radius 3px 3px 0 0
            margin-right .25em
            transition transform .3s ease
            &.is-active
                border-bottom solid 1px #fff
                z-index 2
                transform translateY(0)
        .tabs-component-panels
            background-color #fff
            border-top solid 1px #bbb
            padding-top 0
            margin-top 1px