/**
 * Custom Styles here.
 *
 * ref: https://v2.vuepress.vuejs.org/reference/default-theme/styles.html
 *
 * Note: To change the mobile breakpoint for the hamburger menu,
 * modify the $MQMobile SCSS variable in palette.scss
 * Default breakpoint is 719px
 */

// Increase content width to 900px
.vp-page [vp-content] {
  max-width: 900px;
}

// .home .hero img {
//   max-width: 450px !important;
// }

.vp-home header.vp-hero img {
  max-height: 500px !important;
  height: auto !important;
}

hr.v-divider {
  margin: 20px;
}

// vuetify overrides * with margin 0
p, ul, ol {
  margin: 16px 0;
}

h2 {
  margin-bottom: 2em;
}

ul ul, ol ol, ul ol, ol ul {
  margin: 0;
}

kbd {
  white-space: nowrap;
  direction: ltr;
}

.v-subheader.blog {
  padding: 0;
}

code {
  direction: ltr;
}

div.line-numbers-mode {
  /* fix the direction of the content in code blocks */
  direction: ltr;
  /* let the code not touch the right edge of the block */
  padding-right: 1rem;
}

/* Adjust docsearch position */
div.docsearch-placeholder, #docsearch-container {
  margin-left: 15px;
}

// add RTL styles
// taken from: https://github.com/abbasifard/vuepress-rtl/blob/master/src/rtl.styl
html[dir="rtl"] {
  ul, ol {
    padding-left: 0 !important;
    padding-right: 1.2em;
  }

  div.line-numbers-wrapper {
    /* fix the placement of the line numbers */
    left: 0;
  }

  .page-nav > .inner > .prev {
    float: right;
  }

  .page-nav > .inner > .next {
    float: left;
  }

  .page-nav > .inner > .prev:before {
    content: '→';
  }

  .page-nav > .inner > .next:after {
    content: '←';
  }

  a.sidebar-link {
    border-left: none;
    border-right: 0.25rem solid transparent;
  }

  .sidebar .sidebar-sub-headers {
    padding-left: 0;
    padding-right: 1rem;
  }

  a.sidebar-link {
    border-left: none;
    border-right: 0.25rem solid transparent;

    &.active {
      border-left-color: #fff;
      border-right-color: var(--c-brand);
    }

    .sidebar-group & {
      padding-left: 0;
      padding-right: 2rem;
    }

    .sidebar-sub-headers & {
      border-left: none;
      border-right: none;
    }
  }

  .custom-block {
    &.tip, &.warning, &.danger {
      border-left-width: 0;
      border-right-width: 0.5rem;
      border-left-style: none;
      border-right-style: solid;
    }
  }

  .sidebar-heading {
    padding-left: 0;
    padding-right: 1.5rem;
  }

  .sidebar {
    padding-left: 1.5rem;
    padding-right: 0;
  }

  .sidebar-heading, .sidebar {
    .arrow {
      right: 0.35em;
      margin-right: 0.35em;
    }

    .arrow.right {
      transform: rotate(180deg);
    }
  }

  .nav-links {
    .nav-item {
      margin-left: 0;
      margin-right: 1.5rem;
    }

    .repo-link {
      margin-left: 0;
      margin-right: 1.5rem;
    }
  }

  .page-nav.content {
    .next {
      float: left;
    }
  }

  .dropdown-wrapper {
    .dropdown-title {
      .arrow {
        margin-left: 0;
        margin-right: 0.4rem;
      }
    }
  }

  .content pre, .content pre[class*="language-"] {
    direction: ltr;
  }

  body {
    direction: rtl;
  }

  .page {
    padding-left: 0 !important;
    padding-right: var(--sidebar-width);
    text-align: right;
    direction: rtl;
  }

  .sidebar {
    left: auto !important;
    right: 0 !important;
    border-right: none;
    border-left: 1px solid var(--c-border);
    direction: rtl;
    transform: none;
    transition: right 0.5s linear;
  }

  .theme-container.no-sidebar:not(.sidebar-open) .sidebar {
    right: -100vw !important;
  }

  a.header-anchor {
    float: right !important;
    margin-left: 0 !important;
    margin-right: -0.87em;
    padding-right: 0 !important;
    padding-left: 0.23em;
  }

  .search-box {
    margin-right: 0 !important;
    margin-left: 0.5rem;
  }

  .navbar {
    .links {
      left: 1.5rem;
      right: auto;
    }
  }
}

