@import "@fontsource/roboto";
@tailwind base;
@tailwind components;
@tailwind utilities;

html {
    font-family: 'Roboto', sans-serif;
}

.ace_editor {
    @apply rounded;
}
.ace_editor, .ace_text-input, .ace_editor div {
    font-family: monospace !important;
}

.main-grid {
    
}
.sidebar-wrapper {
    @apply pt-10 bg-base-200;
    position: relative;
    width: 100%;
    
}
aside {
    @apply h-screen;
    position: fixed;
    overflow-y: scroll;
    width: 30%;
}

aside > ul {
    @apply menu menu-compact flex flex-col p-0 px-4;
}

aside > ui > li {
    @apply menu-title uppercase font-bold text-sm tracking-wider pb-1;
}

.title {
    @apply uppercase font-bold text-sm tracking-wider;
}

td {
    overflow: scroll;
}

.table th.param-cell {
    @apply font-normal;
    @apply truncate;
    border-left: 1px solid rgb(59 130 246);
    padding-left: 0px;

}
.method-GET {
    @apply text-info;
}
.method-POST {
    @apply text-success;
}
.method-PUT {
    @apply text-warning;
}
.method-DELETE {
    @apply text-error;
}
.method-PATCH {
    @apply text-warning;
}
.method-HEAD {
    @apply text-info;
}
.bg-created {
    @apply bg-success;
}
.bg-saved {
    @apply bg-info;
}
.bg-updated {
    @apply bg-warning;
}
.bg-deleted {
    @apply bg-error;
}
.bg-retrieved {
    @apply bg-gray-800;
}
.badge-created {
    @apply badge-success;
}
.badge-saved {
    @apply badge-info;
}
.badge-updated {
    @apply badge-warning;
}
.badge-deleted {
    @apply badge-error;
}
.badge-retrieved {
    @apply badge-ghost;
}

.badge-200,.badge-201,.badge-202,.response-204  {
    @apply bg-success;
}

.badge-422,.badge-429, {
    @apply bg-warning;
}
.badge-400,.badge-401,.badge-402,.badge-403,.badge-404,.badge-405 {
    @apply bg-error;
}
.badge-500,.badge-501,.badge-502,.badge-503 {
    @apply bg-error;
}
.response {
    @apply w-10/12 rounded bg-base-300 pl-3 pt-1 pb-1 mb-2 font-bold;
}
.response-200,.response-201,.response-202,.response-204 {
    @apply bg-success text-green-800;
}
.response-422,.response-429 {
    @apply bg-yellow-500 text-yellow-800;
}
.response-400,.response-401,.response-402,.response-403,.response-404,.response-405 {
    @apply bg-red-300 text-red-800;
}
.response-500,.response-501,.response-502,.response-503 {
    @apply bg-red-400 text-red-800;
}