@import 'variables';

html {
  font-size: $base-font-size;
}

.theme--light.v-application,
.theme--light.v-list-item:not(.v-list-item--active):not(.v-list-item--disabled) {
  color: $base-font-color !important;
}

.v-application {
  line-height: $base-line-height;
  font-family: $base-font-family;
}
html[lang^="ja"] {
  .v-application {
    font-family: $font-family-japanese;
    *:not(pre *) {
      letter-spacing: 0.03em;
    }
  }
}

.v-app-bar {
  background-color: $color-app-bar !important;
}

$sidebar-outer-width: $sidebar-width + $sidebar-padding-x * 2;
$sidebar-margin-left: 24px;

#sidebar {
  word-wrap: break-word;
  flex: 0 0 $sidebar-outer-width;
  height: auto;
  margin-left: $sidebar-margin-left;

  #sticky {
    margin-top: 2.5rem;
    position: sticky;
    top: $h-anchor-margin-top;
  }
}
.v-navigation-drawer {
  width: $sidebar-width + $sidebar-padding-x * 2 !important;
}

#content {
  width: calc(100% - #{$sidebar-outer-width + $sidebar-margin-left});
  word-wrap: break-word;
  @media (max-width: 960px) { // <= md
    width: 100%;
  }
}

// increase padding-x but make code block zero padding-x
@media (max-width: 960px) { // <= md
  $additional-padding: 6px;

  #content {
    padding-left: $additional-padding !important;
    padding-right: $additional-padding !important;

    div[class*="language-"] {
      $vuetify-container-padding: 12px;

      $minus-margin: -1 * ($additional-padding + $vuetify-container-padding);
      margin-left: $minus-margin !important;
      margin-right: $minus-margin !important;
    }
  }
}