/*
* Write hoppscotch-common related custom styles in this file.
* If styles are sharable across all package then write into hoppscotch-ui/assets/scss/styles.scss file.
*/
* {
  backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  @apply selection:bg-accentDark;
  @apply selection:text-accentContrast;
  @apply overscroll-none;
}
*::before {
  backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
*::after {
  backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

:root {
  --font-sans: "Inter Variable", sans-serif;
  --font-mono: "Roboto Mono Variable", monospace;
  --font-size-body: 0.75rem;
  --font-size-tiny: 0.625rem;
  --line-height-body: 1rem;
  --upper-primary-sticky-fold: 4rem;
  --upper-secondary-sticky-fold: 6.188rem;
  --upper-tertiary-sticky-fold: 8.25rem;
  --upper-fourth-sticky-fold: 10.2rem;
  --upper-mobile-primary-sticky-fold: 6.75rem;
  --upper-mobile-secondary-sticky-fold: 8.813rem;
  --upper-mobile-sticky-fold: 10.875rem;
  --upper-mobile-tertiary-sticky-fold: 8.25rem;
  --lower-primary-sticky-fold: 3rem;
  --lower-secondary-sticky-fold: 5.063rem;
  --lower-tertiary-sticky-fold: 7.125rem;
  --lower-fourth-sticky-fold: 9.188rem;
  --sidebar-primary-sticky-fold: 2rem;
  --properties-primary-sticky-fold: 2.063rem;
  --primary-color: #181818;
  --primary-light-color: #1c1c1e;
  --primary-dark-color: #262626;
  --primary-contrast-color: #171717;
  --secondary-color: #a3a3a3;
  --secondary-light-color: #737373;
  --secondary-dark-color: #fafafa;
  --divider-color: #262626;
  --divider-light-color: #1f1f1f;
  --divider-dark-color: #2d2d2d;
  --error-color: #292524;
  --tooltip-color: #f5f5f5;
  --popover-color: #1b1b1b;
  --editor-theme: "merbivore_soft";
  --accent-color: #10b981;
  --accent-light-color: #34d399;
  --accent-dark-color: #059669;
  --accent-contrast-color: #fff;
  --gradient-from-color: #a7f3d0;
  --gradient-via-color: #34d399;
  --gradient-to-color: #059669;
  @apply antialiased;
  accent-color: var(--accent-color);
  font-variant-ligatures: common-ligatures;
}

::-webkit-scrollbar-track {
  @apply bg-transparent;
  @apply border-b-0 border-l border-r-0 border-t-0 border-solid border-dividerLight;
}

::-webkit-scrollbar-thumb {
  @apply bg-divider bg-clip-content;
  @apply rounded-full;
  @apply border-4 border-solid border-transparent;
  @apply hover:bg-dividerDark;
  @apply hover:bg-clip-content;
}

::-webkit-scrollbar {
  @apply w-4;
  @apply h-0;
}

.no-scrollbar {
  scrollbar-width: none;
}

input::placeholder,
textarea::placeholder,
.cm-placeholder {
  @apply text-secondary;
  @apply opacity-50 !important;
}

input,
textarea {
  @apply text-secondaryDark;
  @apply font-medium;
}

html {
  scroll-behavior: smooth;
}

body {
  @apply bg-primary;
  @apply text-body text-secondary;
  @apply font-medium;
  @apply select-none;
  @apply overflow-x-hidden;
  @apply leading-body !important;
  animation: fade 300ms forwards;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
}

@keyframes fade {
  0% {
    @apply opacity-0;
  }
  100% {
    @apply opacity-100;
  }
}
.fade-enter-active,
.fade-leave-active {
  @apply transition-opacity;
}

.fade-enter-from,
.fade-leave-to {
  @apply opacity-0;
}

.slide-enter-active,
.slide-leave-active {
  @apply transition;
  @apply duration-300;
}

.slide-enter-from,
.slide-leave-to {
  @apply transform;
  @apply translate-x-full;
}

.bounce-enter-active,
.bounce-leave-active {
  @apply transition;
}

.bounce-enter-from,
.bounce-leave-to {
  @apply transform;
  @apply scale-95;
}

.svg-icons {
  @apply flex-shrink-0;
  @apply overflow-hidden;
  height: var(--line-height-body);
  width: var(--line-height-body);
}

a {
  @apply inline-flex;
  @apply text-current;
  @apply no-underline;
  @apply transition;
  @apply leading-body;
  @apply focus:outline-none;
}
a.link {
  @apply items-center;
  @apply px-1 py-0.5;
  @apply -mx-1 -my-0.5;
  @apply text-accent;
  @apply rounded;
  @apply hover:text-accentDark;
  @apply focus-visible:ring;
  @apply focus-visible:ring-accent;
  @apply focus-visible:text-accentDark;
}

.cm-tooltip .tippy-box {
  @apply shadow-none !important;
  @apply fixed;
  @apply inline-flex;
  @apply -mt-7;
}

.tippy-box[data-theme~=tooltip] {
  @apply bg-tooltip;
  @apply border-solid border-tooltip;
  @apply rounded;
  @apply shadow;
}
.tippy-box[data-theme~=tooltip] .tippy-content {
  @apply flex;
  @apply text-tiny text-primary;
  @apply font-semibold;
  @apply px-2 py-1;
  @apply truncate;
  @apply leading-body;
  @apply items-center;
}
.tippy-box[data-theme~=tooltip] .tippy-content kbd {
  @apply hidden;
  @apply font-sans;
  background-color: rgba(107, 114, 128, 0.45);
  @apply text-primaryLight;
  @apply rounded-sm;
  @apply px-1;
  @apply my-0 ml-1;
  @apply truncate;
  @apply sm:inline-flex;
}
.tippy-box[data-theme~=tooltip] .tippy-content .env-icon {
  @apply transition;
  @apply inline-flex;
  @apply items-center;
}
.tippy-box[data-theme~=tooltip] .tippy-svg-arrow svg:first-child {
  @apply fill-tooltip;
}
.tippy-box[data-theme~=tooltip] .tippy-svg-arrow svg:last-child {
  @apply fill-tooltip;
}

.tippy-box[data-theme~=popover] {
  @apply bg-popover;
  @apply border-solid border-dividerDark;
  @apply rounded;
  @apply shadow-lg;
  @apply max-w-[45vw] !important;
}
.tippy-box[data-theme~=popover] .tippy-content {
  @apply flex flex-col;
  @apply max-h-[45vh];
  @apply items-stretch;
  @apply overflow-y-auto;
  @apply text-body text-secondary;
  @apply p-2;
  @apply leading-body;
  @apply focus:outline-none;
  scroll-behavior: smooth;
}
.tippy-box[data-theme~=popover] .tippy-content > span {
  @apply block !important;
}
.tippy-box[data-theme~=popover] .tippy-svg-arrow svg:first-child {
  @apply fill-dividerDark;
}
.tippy-box[data-theme~=popover] .tippy-svg-arrow svg:last-child {
  @apply fill-popover;
}

[data-v-tippy] {
  @apply flex flex-1;
  @apply truncate;
}

[interactive] > div {
  @apply flex flex-1;
  @apply h-full;
}

hr {
  @apply border-b border-dividerLight;
  @apply my-2 !important;
}

.heading {
  @apply font-bold;
  @apply text-lg text-secondaryDark;
  @apply tracking-tight;
}

.input,
.select,
.textarea {
  @apply flex;
  @apply w-full;
  @apply px-4 py-2;
  @apply bg-transparent;
  @apply rounded;
  @apply text-secondaryDark;
  @apply border border-divider;
  @apply focus-visible:border-dividerDark;
}

input,
select,
textarea,
button {
  @apply truncate;
  @apply transition;
  @apply text-body;
  @apply leading-body;
  @apply focus:outline-none;
  @apply disabled:cursor-not-allowed;
}

.input[type=file],
.input[type=radio],
#installPWA {
  @apply hidden;
}

.floating-input ~ label {
  @apply absolute;
  @apply px-2 py-0.5;
  @apply m-2;
  @apply rounded;
  @apply transition;
  @apply origin-top-left;
}

.floating-input:focus-within ~ label,
.floating-input:not(:placeholder-shown) ~ label {
  @apply bg-primary;
  @apply transform;
  @apply origin-top-left;
  @apply scale-75;
  @apply -translate-y-4 translate-x-1;
}

.floating-input:focus-within ~ label {
  @apply text-secondaryDark;
}

.floating-input ~ .end-actions {
  @apply absolute;
  @apply right-[.05rem];
  @apply inset-y-0;
  @apply flex;
  @apply items-center;
}

.floating-input:has(~ .end-actions) {
  @apply pr-12;
}

pre.ace_editor {
  @apply font-mono;
  @apply resize-none;
  @apply z-0;
}

.select {
  @apply appearance-none;
  @apply cursor-pointer;
}
.select::-ms-expand {
  @apply hidden;
}

.info-response {
  color: var(--status-info-color);
}

.success-response {
  color: var(--status-success-color);
}

.redirect-response {
  color: var(--status-redirect-color);
}

.critical-error-response {
  color: var(--status-critical-error-color);
}

.server-error-response {
  color: var(--status-server-error-color);
}

.missing-data-response {
  color: var(--status-missing-data-color);
}

.toasted-container {
  @apply max-w-md;
  @apply z-[10000];
}
.toasted-container .toasted.toasted-primary {
  @apply px-4 py-2;
  @apply bg-tooltip;
  @apply border-secondaryDark;
  @apply text-body text-primary;
  @apply justify-between;
  @apply shadow-lg;
  @apply font-semibold;
  @apply transition;
  @apply leading-body;
  @apply sm:rounded;
  @apply sm:border;
}
.toasted-container .toasted.toasted-primary .action {
  @apply relative;
  @apply flex flex-shrink-0;
  @apply text-body;
  @apply px-4;
  @apply my-1;
  @apply ml-auto;
  @apply normal-case;
  @apply font-semibold;
  @apply leading-body;
  @apply tracking-normal;
  @apply rounded;
  @apply last:ml-4;
  @apply sm:ml-8;
  @apply before:absolute;
  @apply before:bg-current;
  @apply before:opacity-10;
  @apply before:inset-0;
  @apply before:transition;
  @apply before:content-[""];
  @apply hover:no-underline;
  @apply hover:before:opacity-20;
}
.toasted-container .toasted.info {
  @apply bg-accent;
  @apply text-accentContrast;
  @apply border-accentDark;
}
.toasted-container .toasted.error {
  @apply bg-red-200;
  @apply text-red-800;
  @apply border-red-400;
}
.toasted-container .toasted.success {
  @apply bg-green-200;
  @apply text-green-800;
  @apply border-green-400;
}

.smart-splitter .splitpanes__splitter {
  @apply relative;
  @apply before:absolute;
  @apply before:inset-0;
  @apply before:bg-accentLight;
  @apply before:opacity-0;
  @apply before:z-20;
  @apply before:transition;
  @apply before:content-[""];
  @apply hover:before:opacity-100;
}

.no-splitter .splitpanes__splitter {
  @apply relative;
}

.smart-splitter.splitpanes--vertical > .splitpanes__splitter {
  @apply w-0;
  @apply before:-left-0.5;
  @apply before:-right-0.5;
  @apply before:h-full;
  @apply bg-divider;
}

.smart-splitter.splitpanes--horizontal > .splitpanes__splitter {
  @apply h-0;
  @apply before:-top-0.5;
  @apply before:-bottom-0.5;
  @apply before:w-full;
  @apply bg-divider;
}

.no-splitter.splitpanes--vertical > .splitpanes__splitter {
  @apply w-0;
  @apply pointer-events-none;
  @apply bg-dividerLight;
}

.no-splitter.splitpanes--horizontal > .splitpanes__splitter {
  @apply h-0;
  @apply pointer-events-none;
  @apply bg-dividerLight;
}

.splitpanes--horizontal .splitpanes__pane {
  @apply transition-none;
}

.splitpanes--vertical .splitpanes__pane {
  @apply transition-none;
}

.cm-focused {
  @apply select-auto;
  @apply outline-none !important;
}
.cm-focused .cm-activeLine {
  @apply bg-primaryLight;
}
.cm-focused .cm-activeLineGutter {
  @apply bg-primaryDark;
}

.cm-scroller {
  @apply overscroll-y-auto;
}

.cm-editor .cm-line::selection {
  @apply bg-accentDark !important;
  @apply text-accentContrast !important;
}
.cm-editor .cm-line ::selection {
  @apply bg-accentDark !important;
  @apply text-accentContrast !important;
}

.shortcut-key {
  @apply inline-flex;
  @apply font-sans;
  @apply text-tiny;
  @apply bg-dividerLight;
  @apply rounded;
  @apply ml-2;
  @apply px-0.5;
  @apply min-w-[1rem];
  @apply min-h-[1rem];
  @apply leading-none;
  @apply items-center;
  @apply justify-center;
  @apply border border-dividerDark;
  @apply shadow-sm;
  @apply <sm:hidden;
}

.capitalize-first {
  @apply first-letter:capitalize;
}

details {
  @apply select-none;
}

details summary::-webkit-details-marker {
  @apply hidden;
}

details summary .indicator {
  @apply transition;
}

details[open] summary .indicator {
  @apply transform;
  @apply rotate-90;
}

@media (max-width: 767px) {
  main {
    margin-bottom: env(safe-area-inset-bottom);
  }
}
.env-highlight {
  @apply text-accentContrast;
}
.env-highlight.env-found {
  @apply bg-accentDark;
  @apply hover:bg-accent;
}
.env-highlight.env-not-found {
  @apply bg-red-500;
  @apply hover:bg-red-600;
}

#nprogress .bar {
  @apply bg-accent !important;
}

.color-picker[type=color] {
  @apply appearance-none;
}

.color-picker[type=color]::-webkit-color-swatch-wrapper {
  @apply rounded;
  @apply p-0;
}

.color-picker[type=color]::-webkit-color-swatch {
  @apply rounded;
  @apply border-0;
}

.gql-operation-not-highlight {
  @apply opacity-50;
}

.gql-operation-highlight {
  @apply opacity-100;
}