@use 'core/variables' as *;
@use 'core/colors';
@use 'core/mixins' as *;

@use 'core/bootstrap';
@use 'core/base';

@use 'components/banner';
@use 'components/code';
@use 'components/cookie-notice';
@use 'components/form';
@use 'components/header';
@use 'components/search';
@use 'components/sidebar';
@use 'components/tags';
@use 'components/toc';

@use 'dartvm';
@use 'books';
@use 'os-tabs';
@use 'overwrites';
@use 'dash';

// Extra variables (defined in terms of bootstrap and other defaults)
$font-color: bootstrap.$body-color;
$font-weight-light-bold: (bootstrap.$font-weight-normal + bootstrap.$font-weight-bold) * 0.5;


/* -----------------------------------------
  DOM
  ----------------------------------------- */

#page-header {
  box-shadow: 0 3px 5px rgba(0, 0, 0, 0.1);
}

#page-content {
  min-height: calc(100vh);

  body.homepage & {
    padding: 0 0 60px;
  }

  body.obsolete & {
    border: 10px solid $alert-warning-bg;
    border-top: none;
  }

  > article {
    > .content {
      max-width: 960px;
      margin-left: auto;
      margin-right: auto;
      padding-top: $top-content-padding;
    }

    @media(min-width: 1024px) {
      margin-left: 226px;
    }

    @media(min-width: 1200px) {
      margin-right: 226px;
    }
  }
}

#site-content-title {
  margin-bottom: bootstrap.bs-spacer(6);
}

#page-footer {
  position: relative;
  z-index: 1000;
  background-color: $site-color-footer;
  padding: 32px;

  color: $site-color-light-grey;
  font-weight: 400;
  font-family: $site-font-family-alt;
  font-size: $font-size-small;

  .brand {
    width: 176px;
  }

  .footer-section {
    display: flex;
    flex-direction: row;
    width: 100%;
    justify-content: space-between;
    text-align: left;

    @media(max-width: 768px) {
      flex-direction: column;
      text-align: center;
    }
  }

  .footer-main {
    margin-bottom: 24px;
    align-items: center;
  }

  .footer-tray {
    border-top: 1px solid #82878c;
    padding-top: 24px;

    .footer-licenses {
      width: 70%;
      max-width: 720px;

      @media(max-width: 768px) {
        width: 100%;
      }
    }
  }

  .footer-social-links {
    a {
      &:not(:first-child) {
        margin-left: 16px;
      }

      svg {
        height: 32px;
        width: 32px;
      }
    }

    @media(max-width: 768px) {
      margin-top: 24px;
    }
  }

  ul {
    list-style-type: none;
    margin: 0;
    padding: 0;

    li {
      display: inline;
      margin-left: 16px;
    }

    @media(max-width: 768px) {
      margin-top: 12px;

      li:first-child {
        margin-left: 0;
      }
    }
  }

  a {
    color: $site-color-light-grey;
    font-family: $site-font-family-alt;

    &:hover, &:focus, &:active {
      color: $site-color-white;
    }
  }
}

// Navigation
#menu-toggle {
  display: none;
  align-items: center;
  line-height: 50px;
  margin-left: 20px;
  padding-right: 10px;
  cursor: pointer;
  z-index: 100;

  i {
    font-size: 32px;
  }
}

#mainnav {
  background-color: $site-color-header;
  color: $site-color-header-text;
  display: flex;
  $mainnav-entry-spacing: 12px;

  ul {
    margin: auto 0 auto auto;
    padding: 0;
    list-style: none;

    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;

    li {
      padding: 0 $mainnav-entry-spacing;

      a {
        color: $site-color-header-text;
        display: inline-block;
        padding: 0 6px;
        font-size: $site-font-size-header;
        font-weight: 400;
        font-family: $site-font-family-alt;

        &:hover, &:active {
          color: $site-color-card-link;
        }
      }

      &.searchfield {
        position: relative;
      }
    }
  }

  .brand {
    display: block;
    float: left;
    width: 85px;
    margin: 0 20px;
    overflow: hidden;
    line-height: 50px;
    position: relative;
    top: -1px;
  }
}

#subnav {
  min-height: 32px;
  line-height: 32px;
  margin-bottom: 10px;

  ul {
    margin: 0;
    padding: 0;
    list-style-type: none;

    li {
      display: inline-block;
      width: 49%;

      a {
        display: block;
        padding-left: 5px;
        padding-right: 5px;
      }

      &.next {
        float: right;
        text-align: right;
      }
    }
  }
}


/* -----------------------------------------
 Anchor links
 ----------------------------------------- */
$icon-size: 24px;
$anchor-padding: 4px;

main .content {
  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    // Push # link targets clear of page header.
    &[id] {
      scroll-margin: 60px;
    }

    // Let the wrapper set the bottom margin.
    margin-bottom: 0;
  }

  // Push # link targets clear of page header.
  a[id] {
    scroll-margin: 60px;
  }

  .header-wrapper {
    display: flex;
    margin-top: 1.5rem;
    margin-bottom: 0.75rem;
    align-items: center;

    .heading-link {
      margin-left: 0.4rem;
      font-size: 1.3rem;
      line-height: 1;
      @include transition(.1s);
      overflow: hidden;
      color: #4a4a4a;
      opacity: 0;

      &:hover {
        color: $brand-primary;
      }

      &:focus {
        opacity: 1
      }

      &:active {
        color: $flutter-color-blue-700;
      }
    }

    &:hover {
      .heading-link {
        opacity: 1
      }
    }
  }
}


/* -----------------------------------------
  Utility Classes
 ----------------------------------------- */

.content {
  position: relative;
  padding: $content-padding;
}

.button {
  padding: 5px 10px;
  color: $blue;
  border-radius: 8px;
}

// Columns
.cols2 {
  list-style: none;
  column-count: 2;
  column-gap: 0;
  padding-left: $font-size-base * 0.5;

  li {
    page-break-inside: avoid;
    padding: $font-size-base * 0.5;
    font-size: $font-size-small;
  }
}

.list-image {
  width: 48px;
  margin: 0.25rem;
}

.text-icon {
  margin: 0 0.25rem;
  width: 20px;
  height: 20px;
}

.cols3 {
  list-style: none;
  column-count: 3;
  column-gap: 0;

  li {
    page-break-inside: avoid;
  }
}

.card-grid {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  margin-left: -15px;
  margin-right: -15px;
}

.card {
  display: block;
  position: relative;
  width: 300px;
  height: auto;
  min-height: 100px;
  padding: 20px;
  margin: 15px;
  overflow: hidden;
  box-sizing: border-box;
  background-color: #294058;
  border-radius: 0;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.21);
  color: $site-color-card-text;

  h1, h2, h3, h4, h5, h6 {
    font-family: $site-font-family-gsans;
    margin-top: 0;

    a {
      color: $site-color-card-text;
      font-family: $site-font-family-gsans;
    }
  }

  h3 {
    font-size: bootstrap.$h2-font-size;
  }

  a {
    color: $site-color-card-link;
  }

  &.narrow {
    width: 250px;
  }
}

// Support for .card-grid formatted as a markdown unordered list
ul.card-grid {
  padding-left: 0;
}

// Platform logos
li.card {
  color: inherit;
  background-color: transparent;
  box-shadow: none;

  .logo {
    display: block;
    padding-bottom: $font-size-base;
  }

  h1, h2, h3, h4, h5, h6 {
    a {
      color: inherit;
    }
  }
}

.muted {
  color: $gray;
}

.footnote {
  margin: 0;
  padding: 0;
  list-style-type: none;

  li {
    counter-increment: step-counter;
    margin-bottom: 10px;
    position: relative;

    &:before {
      content: counter(step-counter);
      position: absolute;
      left: -25px;
      top: -3px;
      font-size: 20px;
      font-weight: bold;
      padding: 3px 8px;
    }
  }
}

/* -----------------------------------------
  Bootstrap Overwrites
 ----------------------------------------- */

.container {
  position: relative;
  max-width: 100%;
  width: $live-content-width;
  margin: 0 auto;
}

.table {
  width: 100%;
  @extend .table-striped;

  // override .table-striped macro, remove top border
  td {
    border-top: none;
  }
}

// If table head has empty children, just hide it
// since markdown-it's tables don't support headless tables.
thead:has(th:empty) {
  display: none;
}

.table-wrapper {
  overflow-x: auto;
}

.alert {
  border: none;
  border-radius: 0;
  color: $site-color-body;
  margin-top: 1rem;
  padding: 1.5rem;

  i.material-icons {
    font-size: 1.25em;
    user-select: none;
  }

  .alert-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-family: $site-font-family-gsans;
    font-size: 1.125rem;
    font-weight: 500;
  }

  .alert-content {
    margin-top: 0.5rem;
  }

  i.material-symbols {
    font-size: 1.25em;
    user-select: none;
  }

  code {
    background-color: transparent;
  }

  pre {
    background-color: #00000010;
  }

  p:last-child, li:last-child, ul:last-child, ol:last-child {
    margin-bottom: 0;
  }

  &.alert-success {
    width: auto;
    background-color: $alert-success-bg;
  }

  &.alert-info {
    width: auto;
    background-color: $alert-info-bg;
  }

  &.alert-secondary {
    width: auto;
    background-color: $flutter-color-grey-500;
  }

  &.alert-warning {
    width: auto;
    background-color: $alert-warning-bg;
  }

  &.alert-danger {
    width: auto;
    background-color: $alert-danger-bg;
  }

  &.alert-obsolete {
    width: auto;
    background-color: $gray-dark;
    color: $white-base;
  }
}

.material-symbols {
  font-family: $site-font-family-icon;
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-feature-settings: 'liga';
  -webkit-font-smoothing: antialiased;
}

/* Used for inlined icon markers, usually at the start of a paragraph */
.content > p {
  > i.material-symbols, > span.material-symbols {
    vertical-align: bottom;
    user-select: none;
  }
}

// Make icons used in system requirements table unselectable.
.system-support {
  user-select: none;
}

nav.breadcrumbs {
  align-items: center;
  margin-bottom: 1rem;
}

ol.breadcrumb-list {
  border-radius: 0.375rem;
  padding: 0.375rem 0;

  align-items: center;
  list-style: none;

  font-family: $site-font-family-alt;

  display: flex;
  flex-wrap: wrap;
  flex-direction: row;

  li.breadcrumb-item {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 0;

    & a {
      padding: 0.125rem;
      border-radius: 0.125rem;
    }

    &.active a {
      color: $site-color-nav-links;
      cursor: default;
      text-decoration: none;
    }

    &:before {
      display: none;
    }
  }

  .child-icon {
    user-select: none;
  }
}

#page-github-links {
  font-style: italic;
  font-size: 0.75rem;
  padding-top: 0.25rem;

  border-top: 0.05rem solid $site-color-light-grey;
}

ul.nav-list {
  list-style: none;
  padding: 0;

  li {
    border-bottom: 1px solid $gray-light;

    h2 {
      font-weight: 400;
      font-size: 20px;
      margin-bottom: 0;
    }
  }
}


/* -----------------------------------------
  Templates
 ----------------------------------------- */

// Homepage
body.homepage {
  #sidenav {
    display: none;
  }

  section {
    padding: 0;
  }

  .card-grid {
    justify-content: center;
    margin-top: 30px;
    margin-bottom: 30px;
  }
}

// Error Page
body.error {
  #sidenav {
    display: none;
  }

  .banner {
    display: none;
  }

  background-color: #132030;
  background-image: url('/assets/img/404-bg-pattern.jpg');
  color: #8d9399;

  @media(min-width: 1600px) {
    background-size: cover;
  }

  h1 {
    color: white;
    font-family: $site-font-family-gsans-display;
    font-size: 100px;
    margin: 0 auto;
  }

  h2 {
    color: white;
    font-family: $site-font-family-gsans;
    font-size: 24px;
    margin: 8px auto 16px;
  }

  #in-content-search {
    input[type="search"] {
      display: inline-block;
      background: #35404d;
      color: white;
      font-size: 20px;
      padding: 10px 40px;
      border-radius: 30px;
      height: 70px;
      line-height: 70px;
      width: 100%;
      max-width: 880px;
      margin: 0 auto 88px;
    }
  }

  .content {
    a {
      color: $site-color-card-link;
    }
  }
}

// Top-level Page
body.top {
  #sidenav {
    display: none;
  }

  #site-toc--inline {
    display: block;
  }

  #site-toc--side {
    display: none;
  }
}

body.obsolete {
  #page-header {
    .alert {
      margin: 0;

      h4 {
        margin-bottom: 0;
        margin-top: 0;
      }
    }
  }
}


/* -----------------------------------------
  Media Queries
 ----------------------------------------- */

@media(max-width: 1024px) {
  #menu-toggle {
    display: flex;
  }

  #sidenav {
    top: 0 !important;
    max-height: 100vh !important;
    bottom: 0;
    min-width: 300px;
    max-width: calc(100vw - 60px);
    background: #fff;
    z-index: 100;
    box-shadow: 0 0 4px rgba(0, 0, 0, .14), 0 4px 8px rgba(0, 0, 0, .28);
    transform: translateX(-100%);
    transition: transform 0.4s ease-in-out;

    .site-header__search {
      display: flex;
    }

    .nav-link {
      white-space: nowrap;
    }
  }

  body.open_menu {
    &:before {
      content: '';
      display: block;
      position: fixed;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      height: 100%;
      z-index: 5;
      background-color: rgba($gray-base, 0.5);
      cursor: pointer;
      pointer-events: none;
      @include transition(0.5s);
    }

    #sidenav {
      display: block;
      left: 0 !important;
      transform: translateX(0);
    }
  }
}

@media(max-width: 960px) {
  #mainnav {
    ul {
      li {
        display: none;

        &.searchfield {
          display: block;
        }
      }
    }
  }
}

@media(max-width: 600px) {
  .card {
    width: 100%;
  }
}

@media(max-width: 479px) {
  #menu-toggle {
    order: 2;
  }

  #mainnav {
    ul {
      li {
        &.searchfield {
          display: none;
        }
      }
    }
  }
}

dd {
  margin-left: 1rem;
}

/* -----------------------------------------
  Headings in tab boxes
 ----------------------------------------- */

div.tabs__content h1, h2, h3, h4, h5, h6 {
  &:first-child {
    margin-top: 0;
  }
}

#skip {
  top: 10px;
  left: 10px;
  position: absolute;
  z-index: $site-z-skip;
  padding: 1rem;
  background-color: $site-color-primary;
  color: $site-color-white;
  border-radius: 0.5rem;
  transform: translateY(-5rem);
}


#skip:focus {
  opacity: 1;
  transform: translateY(0);
}

.glossary-page {
 .term-separator {
   border-top: 0.05rem solid $site-color-light-grey;
 }
}
