@tailwind base;
@tailwind components;

:root {
  --stack-height: var(--tab-main-height);
}

.stack {
  @apply grid;
  grid-template: calc(0.4 * var(--stack-height)) calc(0.6 * var(--stack-height)) / 1fr;
}

@screen sm {
  .stack {
    @apply items-stretch;
    grid-template: var(--stack-height) / 22rem 1fr;
  }
}

.stack-nav {
  @apply h-full;
  @apply border-b;
  @apply border-gray-300 dark:border-gray-600;
  @apply text-xs;
  @apply overflow-hidden;
  @apply grid;
  grid-template: 1fr / 100%;
}

@screen sm {
  .stack-nav {
    @apply grid;
    grid-template: auto 1fr / 100%;
    @apply border-b-0;
    @apply border-r;
  }
}

.stack-nav-actions {
  @apply hidden;
}

.stack-nav-arrows {
  @apply grid;
  @apply justify-center;
  @apply items-center;
  @apply gap-1;
  @apply w-10;
  @apply px-3;
}

.stack-nav-arrow {
  @apply text-gray-500;
  @apply text-xs;
}

.stack-nav-arrow:hover {
  @apply text-gray-700;
}

.stack-frames {
  @apply overflow-hidden;
  @apply border-t;
  @apply border-gray-200;
}

.stack-frames-scroll {
  @apply absolute;
  @apply inset-0;
  @apply overflow-x-hidden;
  @apply overflow-y-auto;
}

.stack-frame-group {
  @apply border-b;
  @apply border-gray-300;
}

.stack-frame {
  @apply grid;
  @apply items-end;
  grid-template-columns: 2rem auto auto;
}

@screen sm {
  .stack-frame {
    grid-template-columns: 3rem 1fr auto;
  }
}

.stack-frame:not(:first-child) {
  @apply -mt-2;
}

.stack-frame-selected,
.stack-frame-selected .stack-frame-header {
  @apply bg-purple-100;
  @apply z-10;
}

.stack-frame-group-vendor .stack-frame-selected,
.stack-frame-group-vendor .stack-frame-selected .stack-frame-header {
  /* @apply bg-gray-100; */
}

.stack-frame-number {
  @apply px-2;
  @apply py-4;
  @apply text-purple-500;
  @apply text-center;
}

.stack-frame-group-vendor .stack-frame-number {
}

.stack-frame-header {
  @apply -mr-10;
  @apply w-full;
}

.stack-frame-text {
  @apply grid;
  @apply items-center;
  @apply gap-2;
  @apply border-l-2;
  @apply pl-3;
  @apply py-4;
  @apply border-purple-300;
  @apply text-gray-700;
}

.stack-frame-group-vendor .stack-frame-text {
  @apply border-gray-300;
}

.stack-frame-selected .stack-frame-text {
  @apply border-purple-500;
}

.stack-frame-group-vendor .stack-frame-selected .stack-frame-text {
  @apply border-gray-500;
}

.stack-frame-line {
  @apply pl-2;
  @apply pr-1;
  @apply py-4;
  @apply text-right;
  @apply leading-tight;
}

.stack-main {
  @apply grid;
  @apply h-full;
  @apply overflow-hidden;
  @apply bg-gray-100;
  grid-template: auto 1fr / 100%;
}

.stack-main-header {
  @apply px-6;
  @apply py-2;
  @apply border-b;
  @apply border-gray-200;
  @apply text-xs;
}

@screen sm {
  .stack-main-header {
    @apply py-4;
    @apply text-base;
  }
}

.stack-main-content {
  @apply overflow-hidden;
}

.stack-viewer {
  /*@apply absolute;*/
  @apply inset-0;
  @apply flex;
  @apply overflow-auto;
  @apply text-xs;
}

.stack-ruler {
  position: -webkit-sticky;
  position: sticky;
  @apply dark:text-gray-300;
  @apply flex-none;
  @apply left-0;
  @apply z-20;
  @apply self-stretch;
}

.stack-lines {
  @apply min-h-full;
  @apply border-r;
  @apply border-gray-200 dark:border-gray-700;
  @apply bg-gray-100 dark:bg-gray-900;
  @apply py-8;
  @apply select-none;
}

.stack-line {
  @apply px-2;
  @apply font-mono;
  @apply leading-loose;
  @apply select-none;
  @apply text-black dark:text-gray-400;
}

.stack-line-highlight {
  @apply bg-blue-300 text-blue-600 dark:bg-black dark:text-red-600;
}

.stack-code {
  @apply flex-grow;
  @apply py-4;
}

.stack-code-line {
  @apply pl-3;
  @apply leading-loose;
}

.stack-code-line:hover {
  @apply bg-blue-100 dark:bg-black;
}

.stack-code-line .editor-link {
  @apply inline-block;
  @apply px-2;
  @apply opacity-0;
  @apply text-purple-400;
}

.stack-code-line-highlight {
  @apply bg-blue-100 dark:bg-black;
}

.btn {
  @apply inline-flex items-center px-3 py-2 border border-gray-300 dark:border-gray-400 dark:hover:border-gray-200 text-xs leading-4 font-medium rounded-md dark:bg-gray-900 text-gray-600 dark:text-gray-400 dark:hover:text-gray-200 hover:border-blue-500 hover:text-blue-500 focus:outline-none;
}
.btn-disabled {
  @apply cursor-not-allowed text-gray-300 dark:text-gray-700 dark:border-gray-700 dark:hover:text-gray-700 dark:hover:border-gray-700 hover:bg-transparent dark:hover:bg-gray-900;
}

/* lists */
.definition-list {
  @apply grid;
  @apply gap-x-6;
  @apply gap-y-2;
}

.definition-list .definition-list {
  @apply border-l-2;
  @apply border-gray-300;
  @apply pl-4;
}

@screen sm {
  .definition-list {
    grid-template-columns: 8rem 1fr;
  }

  .definition-list .definition-list {
    grid-template-columns: auto 1fr;
  }
}

@screen lg {
  .definition-list {
    grid-template-columns: 14rem 1fr;
  }
}

.definition-list-title {
  @apply font-semibold;
  @apply mb-3;
}

@screen sm {
  .definition-list-title {
    margin-left: 9.5rem;
  }
}

@screen lg {
  .definition-list-title {
    margin-left: 15.5rem;
  }
}

.definition-label {
  @apply text-blue-600;
  @apply break-words;
  @apply leading-tight;
}

@screen sm {
  .definition-label {
    @apply text-right;
  }
}

.definition-value {
  @apply break-all;
  @apply mb-4;
  @apply leading-tight;
}

@screen sm {
  .definition-value {
    @apply mb-0;
  }
}

.definition-label:empty:after,
.definition-value:empty:after {
  content: "—";
  @apply text-gray-300;
}

.definition-list-empty {
  @apply text-gray-300;
}

@screen sm {
  .definition-list-empty {
    @apply pl-2;
  }

  .definition-list .definition-list .definition-list-empty {
    @apply pl-1;
  }
}

/* Navbar */
.navbar-link {
  @apply cursor-pointer text-gray-900 dark:text-gray-300 hover:text-blue-500 dark:hover:bg-gray-700 dark:hover:text-white rounded-md py-2 px-3 inline-flex items-center text-sm font-medium;
}
.navbar-link-disabled {
  @apply cursor-not-allowed text-gray-900 dark:text-gray-300 dark:hover:bg-transparent;
}
.navbar-link-icon {
  @apply group-hover:text-blue-500 text-gray-400 h-5 w-5;
}
.navbar-link-disabled .navbar-link-icon {
  @apply text-gray-200 dark:text-gray-600;
}
.navbar-link-icon-only {
  @apply group-hover:text-blue-500 text-black dark:text-gray-400 h-5 w-5;
}
.navbar-link-disabled .navbar-link-icon-only {
  @apply text-gray-500 dark:text-gray-600;
}

.badge {
  @apply inline-flex items-center px-2 py-1 rounded text-xs font-medium;
}
.badge-gray {
  @apply bg-gray-100 text-gray-800 dark:bg-gray-900 dark:text-gray-400;
}
.badge-indigo {
  @apply bg-indigo-200 text-indigo-800 dark:bg-indigo-800 dark:text-indigo-200;
}
.badge-blue {
  @apply bg-indigo-200 text-blue-800 dark:bg-blue-800 dark:text-blue-200;
}

@import "./themes/atom-one-dark.css";
@import "./themes/atom-one-light.css";

@tailwind utilities;
