.theme-light .skeleton-active {
  .skeleton {
    &:before {
      background: linear-gradient(270deg, rgba(201, 222, 233, 0.24) 0%, rgba(201, 222, 233, 0) 100%);
    }
  }
}

//.c-modal, .c-block, .c-compact-card {
//  .c-button {
//    &.secondary {
//      @apply bg-alt;
//
//      &:hover {
//        @apply bg-alt2;
//      }
//
//      &:active {
//        @apply bg-base;
//      }
//
//      &.outline {
//        @apply border-alt4;
//
//        &:hover {
//          @apply border-alt3;
//        }
//
//        &:active {
//          @apply border-alt2;
//        }
//      }
//    }
//  }
//}
.skeleton-container {
  &.skeleton-active {
    .skeleton {
      @apply relative overflow-hidden rounded pointer-events-none;

      .skeleton {
        &:before, &:after {
          @apply hidden;
        }
      }

      &:after {
        @apply block text-0 h-full absolute w-full top-0 left-0 bg-base z-30;
        content: "";
      }

      &:before {
        @apply inset-0 absolute opacity-30 z-40;
        content: '';
        transform: translateX(-100%);
        animation: skeleton 1.2s infinite;
        background: -webkit-gradient(linear, right top, left top, from(rgba(255, 255, 255, 0.4)), to(rgba(255, 255, 255, 0)));
        background: linear-gradient(270deg, rgba(255, 255, 255, 0.4) 0%, rgba(255, 255, 255, 0) 100%);
      }

      * {
        color: transparent !important;
      }
    }
  }
}


@keyframes skeleton {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(100%);
  }
}


// Code highlighting based on GitHub's styles
.theme-light {
  .hljs-comment,
  .hljs-quote,
  .cmt-comment {
    color: #6e7781;
  }

  .hljs-variable,
  .hljs-template-variable,
  .hljs-tag,
  .hljs-name,
  .hljs-selector-id,
  .hljs-selector-class,
  .hljs-regexp,
  .hljs-deletion {
    color: #953800;
  }

  .hljs-number,
  .hljs-built_in,
  .hljs-builtin-name,
  .hljs-literal,
  .hljs-type,
  .hljs-params,
  .hljs-meta,
  .hljs-link,
  .cmt-meta,
  .cmt-propertyName,
  .cmt-className {
    color: #0550ae;
  }

  .hljs-attribute {
    color: #eab700;
  }

  .hljs-string,
  .hljs-symbol,
  .hljs-bullet,
  .hljs-addition,
  .cmt-string {
    color: #0a3069;
  }

  .hljs-title,
  .hljs-section {
    color: #4271ae;
  }

  .hljs-keyword,
  .hljs-selector-tag,
  .cmt-keyword {
    color: #cf222e;
  }

  .cmt-typeName {
    color: #116329;
  }

  .hljs {
    display: block;
    overflow-x: auto;
    background: white;
    color: #4d4d4c;
    padding: 0.5em;
  }

  .hljs-emphasis {
    font-style: italic;
  }

  .hljs-strong {
    font-weight: bold;
  }
}

.theme-dark {
  .hljs-comment,
  .hljs-quote,
  .cmt-comment {
    color: #8b949e;
  }

  .hljs-variable,
  .hljs-template-variable,
  .hljs-tag,
  .hljs-name,
  .hljs-selector-id,
  .hljs-selector-class,
  .hljs-regexp,
  .hljs-deletion {
    color: #ffa657;
  }

  .hljs-number,
  .hljs-built_in,
  .hljs-builtin-name,
  .hljs-literal,
  .hljs-type,
  .hljs-params,
  .hljs-link,
  .cmt-propertyName,
  .cmt-className {
    color: #79c0ff;
  }

  .hljs-attribute {
    color: #f0c674;
  }

  .hljs-string,
  .hljs-symbol,
  .hljs-bullet,
  .hljs-addition,
  .hljs-meta,
  .cmt-string,
  .cmt-meta {
    color: #a5d6ff;
  }

  .hljs-title,
  .hljs-section {
    color: #81a2be;
  }

  .hljs-keyword,
  .hljs-selector-tag,
  .cmt-keyword {
    color: #ff7b72;
  }

  .cmt-typeName {
    color: #7ee787;
  }

  .hljs {
    display: block;
    overflow-x: auto;
    background: #1d1f21;
    color: #c5c8c6;
    padding: 0.5em;
  }

  .hljs-emphasis {
    font-style: italic;
  }

  .hljs-strong {
    font-weight: bold;
  }
}