@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";

@import "./markdown.css";

@import "./highlight-light.css";
@import "./highlight-dark.css" screen and (prefers-color-scheme: dark);

@layer utilities {
  .py-05 {
    padding-top: 0.125rem;
    padding-bottom: 0.125rem;
  }
}

@layer components {
  .button {
    @apply p-2 box-border flex items-center justify-center rounded-md cursor-pointer;
  }

  .button-blue {
    @apply bg-blue-100 hover:bg-blue-200 dark:bg-blue-800 dark:hover:bg-blue-800 dark:bg-opacity-40 dark:hover:bg-opacity-50 text-blue-500 dark:text-blue-400;
  }

  .button-amber {
    @apply bg-amber-100 hover:bg-amber-200 dark:bg-amber-800 dark:hover:bg-amber-800 dark:bg-opacity-40 dark:hover:bg-opacity-50 text-amber-500 dark:text-amber-400;
  }

  .button-green {
    @apply bg-green-300 hover:bg-green-200 dark:bg-green-800 dark:hover:bg-green-800 dark:bg-opacity-40 dark:hover:bg-opacity-50 text-green-700 dark:text-green-400;
  }

  .button-default {
    @apply bg-black dark:bg-white bg-opacity-5 dark:bg-opacity-5 hover:bg-opacity-10 dark:hover:bg-opacity-10;
  }

  .footer-container {
    @apply flex justify-between w-full px-8 py-4 box-border bg-white dark:bg-gray-800 border-t border-gray-200 dark:border-gray-700 text-gray-900 dark:text-white;
  }

  body {
    @apply bg-white dark:bg-gray-800 text-gray-900 dark:text-white overflow-auto;
  }

  .start-title,
  .completed-title {
    @apply font-extrabold text-4xl sm:text-5xl lg:text-6xl tracking-tight text-center;
  }

  .start-description,
  .completed-description {
    @apply mt-6 text-lg md:text-xl text-gray-600 dark:text-gray-400 text-center max-w-3xl mx-auto;
  }

  .icon path {
    @apply fill-gray-800 dark:fill-white;
  }

  .app {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
  }

  .editor {
    @apply flex overflow-hidden rounded-lg md:rounded-xl shadow-2xl dark:shadow-xl max-h-full bg-gray-900 bg-opacity-90 dark:bg-gray-900 dark:bg-opacity-100 h-full w-full;
  }
}

#code_editor {
  background-color: transparent;
  width: 100%;
  height: 100%;
}

.monaco-editor,
.monaco-editor-background,
.monaco-editor .inputarea.ime-input {
  background-color: rgba(0, 0, 0, 0) !important;
}

.monaco-editor .margin {
  background-color: rgba(0, 0, 0, 0.1) !important;
}