@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  html {
    scrollbar-gutter: stable;
  }
}

@layer components {
  .code-block-wrapper.is-collapsed {
    max-height: 28rem;
    overflow: hidden;
  }

  .code-block-wrapper.is-collapsed::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 6rem;
    background: linear-gradient(to bottom, transparent, #ffffff);
    pointer-events: none;
    border-radius: 0 0 0.5rem 0.5rem;
  }

  .code-expand-btn {
    position: absolute;
    bottom: 0.75rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
  }
}