---
permalink: "assets/css/demo.css"
---

$prefix: "tblr-";

$color-highlight-green: #b5f4a5;
$color-highlight-yellow: #ffe484;
$color-highlight-purple: #d9a9ff;
$color-highlight-red: #ff8383;
$color-highlight-blue: #93ddfd;
$color-highlight-gray: #a0aec0;

pre.highlight,
.highlight pre {
  max-height: 30rem;
  margin: 1.5rem 0;
  overflow: auto;
  border-radius: var(--#{$prefix}border-radius);
}

.highlight {
  margin: 0;

  code > * {
    margin: 0 !important;
    padding: 0 !important;
  }

  .c, .c1 { color: $color-highlight-gray; }
  .nt, .nc, .nx { color: $color-highlight-red; }
  .na, .p { color: $color-highlight-yellow; }
  .s, .dl, .s2 { color: $color-highlight-green; }
  .k { color: $color-highlight-blue; }
  .s1, .mi { color: $color-highlight-purple; }
}


// .example {
//   padding: 2rem;
//   margin: 1rem 0 2rem;
//   border: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color);
//   border-radius: 3px 3px 0 0;
//   position: relative;

//   min-height: 12rem;
//   display: flex;
//   align-items: center;
//   overflow-x: auto;
// }

// .example-centered {
//   justify-content: center;

//   .example-content {
//     flex: 0 auto;
//   }
// }

// .example-content {
//   font-size: $font-size-base;
//   line-height: $line-height-base;
//   color: var(--#{$prefix}body-color);
//   flex: 1;
//   max-width: 100%;

//   .page-header {
//     margin-bottom: 0;
//   }
// }

// .example-bg {
//   background: $body-bg;
// }

// .example-code {
//   margin: 2rem 0;
//   border: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color);
//   border-top: none;

//   pre {
//     margin: 0;
//     border: 0;
//     border-radius: 0 0 3px 3px;
//   }

//   .example + & {
//     margin-top: -2rem;
//   }
// }

// .example-column {
//   margin: 0 auto;

//   > .card:last-of-type {
//     margin-bottom: 0;
//   }
// }

// .example-column-1 {
//   max-width: 26rem;
// }

// .example-column-2 {
//   max-width: 52rem;
// }

// .example-modal-backdrop {
//   background: $modal-backdrop-bg;
//   opacity: $modal-backdrop-opacity;
//   position: absolute;
//   width: 100%;
//   left: 0;
//   top: 0;
//   height: 100%;
//   border-radius: 2px 2px 0 0;
// }

.card-sponsor {
  background: var(--#{$prefix}primary-lt) no-repeat center/100% 100%;
  border-color: var(--#{$prefix}primary);
  min-height: 316px;
}

// .dropdown-menu-demo {
//   display: inline-block;
//   width: 100%;
//   position: relative;
//   top: 0;
//   margin-bottom: 1rem !important;
// }


$demo-icon-size: 4rem;
.demo-icons-list {
  display: flex;
  flex-wrap: wrap;
  padding: 0;
  margin: 0 -2px -1px 0;
  list-style: none;

  > * {
    flex: 1 0 $demo-icon-size;
  }
}

.demo-icons-list-wrap {
  overflow: hidden;
}

.demo-icons-list-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1;
  text-align: center;
  padding: 0.5rem;
  border-right: var(--#{$prefix}border-width) var(--#{$prefix}border-style)
    var(--#{$prefix}border-color);
  border-bottom: var(--#{$prefix}border-width) var(--#{$prefix}border-style)
    var(--#{$prefix}border-color);
  color: inherit;
  cursor: pointer;

  .icon {
    width: 1.5rem;
    height: 1.5rem;
    font-size: 1.5rem;
  }

  &:hover {
    text-decoration: none;
  }
}

// //
// // Settings
// //
// .settings-btn {
//   position: fixed;
//   right: -1px;
//   top: 10rem;

//   border-top-right-radius: 0;
//   border-bottom-right-radius: 0;
//   box-shadow: $box-shadow;
// }

// .settings-scheme {
//   display: inline-block;
//   border-radius: 50%;
//   height: 3rem;
//   width: 3rem;
//   position: relative;
//   border: var(--#{$prefix}border-width) var(--#{$prefix}border-style)
//     var(--#{$prefix}border-color);
//   box-shadow: $box-shadow;

//   &-light {
//     background: linear-gradient(135deg, $white 50%, $light 50%);
//   }

//   &-mixed {
//     background-image: linear-gradient(135deg, $dark 50%, #fff 50%);
//   }

//   &-transparent {
//     background: $light;
//   }

//   &-dark {
//     background: $dark;
//   }
  
//   &-colored {
//     background-image: linear-gradient(
//       135deg,
//       var(--#{$prefix}primary) 50%,
//       $light 50%
//     );
//   }
// }