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

@import url(../components/split-view/SplitView.scss);
/* @import url(collection.scss); */
@import url('https://fonts.googleapis.com/css?family=Lato:300,400,700,900&display=swap');
/* @import url('https://fonts.googleapis.com/css2?family=Lato:wght@100&display=swap'); */
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,600;0,700;0,800;1,300;1,400;1,600;1,700;1,800&display=swap');
@import url('https://fonts.googleapis.com/css?family=Roboto:300,400,500&display=swap');

body {
  @apply bg-app-background text-app-foreground;
}

body {
  height: 100vh;
  width: 100vw;
  margin: 0px;
  padding: 0px;
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -o-user-select: none;
  background: var(--app-background);
  color: var(--app-foreground);
  font-weight: 400;
  font-family: var(--font-family);
}

a,
a:hover {
  color: inherit !important;
}
button:disabled,
button[disabled] {
  @apply opacity-50;
}
hr {
  border-color: var(--app-border);
}
.fullscreen {
  height: 100%;
}
*:focus-visible {
  box-shadow: inset 0px 0px 0px 1px var(--focus-border) !important;
  outline: none;
}
*:focus {
  outline: none;
}
::placeholder {
  color: var(--input-placeholder) !important;
  opacity: 1;
}
input:focus,
input:focus-visible textarea:focus,
textarea:focus-visible {
  box-shadow: none !important;
  border: 1px solid var(--focus-border) !important;
}
tr:focus-visible {
  box-shadow: none !important;
}
.focus-outer:focus {
  box-shadow: inset 0px 0px 0px 1px var(--focus-border) !important;
  outline: none;
}
.focus-outer-tab:focus {
  box-shadow: inset 0px 0px 0px 1px var(--focus-border),
    inset 0px -2px 0px 0px var(--focus-border) !important;
  outline: none;
}

.focus-outer2:focus {
  box-shadow: inset 0px 0px 0px 1px var(--focus-border) !important;
  outline: none;
}
.fc-error {
  @apply text-error text-sm mb-2;
}
.pt-half {
  padding-top: 2px;
}
.z-9999 {
  z-index: 9999;
}
.action {
  visibility: hidden;
  cursor: pointer;
}
.explorer-wrapper {
  max-height: calc(100vh - 25px);
}
.GET:not(.tab-icon) {
  color: var(--req-get);
}
.POST:not(.tab-icon) {
  color: var(--req-post);
}
.PUT:not(.tab-icon) {
  color: var(--req-put);
}
.DELETE:not(.tab-icon) {
  color: var(--req-delete);
}
.PATCH:not(.tab-icon) {
  color: var(--req-patch);
}
.HEAD:not(.tab-icon) {
  color: var(--req-head);
}
.OPTIONS:not(.tab-icon) {
  color: var(--req-options);
}
.PURGE:not(.tab-icon) {
  color: var(--req-purge);
}
.LINK:not(.tab-icon) {
  color: var(--req-link);
}
.UNLINK:not(.tab-icon) {
  color: var(--req-unlink);
}
.GRAPHQL:not(.tab-icon) {
  color: var(--req-graphql);
}
.WEBSOCKET:not(.tab-icon) {
  color: var(--req-websocket);
}
.SOCKETIO:not(.tab-icon) {
  color: var(--req-socketio);
}
.hide-action:hover .action {
  visibility: visible;
}
.max-h-screen-third {
  max-height: 75vh;
}
.popover-boxshadow {
  box-shadow: var(--popover-shadow);
}
*.bg-app-background-secondary,
*.bg-app-background-secondary .fc-col,
*.bg-app-background-secondary .fc-col {
  background: var(--app-background-secondary);
}
.fc-h-screen {
  height: 100vh !important;
}
.fc-h-full {
  height: 100% !important;
}
.react-tiny-popover-container {
  z-index: 9999 !important;
}

/*------theme widget css start-------------*/
.fc-theme {
  height: 32px;
  width: 32px;
  margin-right: 8px;
  border: 2px solid var(--app-border);
  display: flex;
  border-radius: 32px;
  overflow: hidden;
  position: relative;
  cursor: pointer;
}

.fc-theme > .themeBG.light-green {
  background: linear-gradient(
    to right,
    var(--mantine-color-gray-0) 14px,
    var(--mantine-color-green-7) 15px
  );
}

.fc-theme > .themeBG.light-orange {
  background: linear-gradient(
    to right,
    var(--mantine-color-gray-0) 14px,
    var(--mantine-color-yellow-9) 15px
  );
}

.fc-theme > .themeBG.dark-green {
  background: linear-gradient(
    to right,
    var(--mantine-color-dark-7) 14px,
    var(--mantine-color-green-7) 15px
  );
}

.fc-theme > .themeBG.dark-orange {
  background: linear-gradient(
    to right,
    var(--mantine-color-dark-7) 14px,
    var(--mantine-color-yellow-9) 15px
  );
}

.fc-theme:hover > .themeBG,
.fc-theme.active > .themeBG {
  opacity: 1;
}

.active.fc-theme {
  border-color: var(--app-foreground) !important;
}

.fc-theme > .themeBG {
  z-index: 0;
  border-radius: 100%;
  width: 100%;
  height: 100%;
  opacity: 0.5;
}
/*------theme widget css end-------------*/

/*----------form css start--------*/
.fc-form label {
  font-size: 12px;
}

.grid.fc-form > div > label {
  width: 40px !important;
  padding-right: 10px !important;
  white-space: nowrap !important;
}

.fc-form input:not([type="checkbox"]),
.fc-form select {
  border-radius: 0px !important;
  resize: none;
  font-size: 14px;
  padding: 4px 10px !important;
  height: 31px !important;
}

.fc-form textarea,
.fc-form textarea:hover,
.fc-form textarea:focus {
  border-radius: 0px;
  resize: none;
  font-size: 13px;
  min-height: 120px;
}

.fc-form .row > label {
  padding-right: 0px;
}

.fc-form-field-group {
  font-size: 14px !important;
  text-transform: uppercase;
  max-width: 0px;
  overflow: visible;
}

.fc-form-field-group span {
  font-size: 12px;
  color: var(--app-foreground-inactive);
  text-transform: none;
  margin-left: 4px;
}

.fc-form.grid {
  display: table;
  width: 100%;
  position: relative;
}

.fc-form.with-padding {
  padding: 12px;
}

.fc-form.grid > div {
  display: table-row;
}

.fc-form.grid > div > label,
.fc-form.grid > div > div {
  display: table-cell;
  flex: none;
  max-width: none;
  padding-bottom: 10px;
  vertical-align: middle;
}

/*---------form css end--------*/

/*---------Collapse button css starts----------*/
.btn-collapse {
  cursor: pointer;
}
.collapsed .btn-collapse {
  cursor: pointer;
  transform: rotate(180deg);
}
.fc-collapsed .fc-btn-collapse {
  cursor: pointer;
  display: block !important;
  transform: rotate(0deg);
}
.fc-collapsed .fc-btn-collapse > span {
  margin-left: -3px;
}
.fc-btn-collapse {
  max-height: 32px !important;
  border: 1px solid var(--app-border);
  max-width: 20px !important;
  position: absolute;
  left: 100%;
  min-width: 20px !important;
  font-size: 24px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: -1px;
  z-index: 1;
  transform: rotate(180deg);
}
.fc-btn-collapse.v2 {
  left: -1px;
  min-height: 33px !important;
}
.fc-collapsed {
  width: 0px !important;
  min-width: 0px !important;
  border: 0px !important;
}
.fc-collapsed > *:not(.fc-collapse-btn),
.fc-collapsed.fc-collapsed-v3 > *:not(.fc-collapse-btn-v3) {
  display: none;
}
.fc-collapsed > .fc-collapse-btn-v3 {
  display: block !important;
}
.fc-collapsed > *:not(.fc-collapse-btn),
.fc-collapsed.fc-collapsed-v3 > *:not(.fc-collapse-btn-v3) {
  display: none;
}
.fc-collapsed > .fc-collapse-btn-v3 {
  display: block !important;
}
.fc-tab-panel-header.fc-collapse-btn-v3 {
  display: flex;
  flex-direction: column-reverse;
  position: absolute;
  left: 0px;
  width: 32px !important;
  border-left: 1px solid var(--app-border);
}
.fc-tab-panel-header.fc-collapse-btn-v3 > .fc-tab-panel-header-left {
  position: absolute;
  transform: rotate(90deg);
  left: -23px;
  top: 54px;
}
.fc-collapsable > .fc-collapse-btn-v3 {
  display: none;
}
.fc-tab-panel-header.fc-collapse-btn-v3 > .fc-tab-panel-header-right {
  top: 6px;
  position: absolute;
  font-size: 20px;
  left: 6px;
  transform: rotate(180deg);
}
.fc-collapsed-v3 {
  width: 32px !important;
}
.fc-col-resizer.fc-collapsed.fc-collapsed-v3.fc-collapsable.left {
  border-left: 1px solid var(--app-border) !important;
}
.fc-collapsed > .fc-collapse-btn,
.fc-collapsed ~ div .fc-collapse-btn {
  transform: rotate(180deg);
}
.fc-collapsed > .fc-collapse-btn.fc-collapse-btn-v2,
.fc-collapsed ~ div .fc-collapse-btn.fc-collapse-btn-v2 {
  transform: rotate(0deg) !important;
}
.fc-collapsed > .fc-collapse-btn.fc-collapse-btn-v2 > span,
.fc-collapsed ~ div .fc-collapse-btn.fc-collapse-btn-v2 > span {
  transform: rotate(180deg) !important;
}
.fc-collapse-btn-v2.fc-collapse-btn > span.ic-caret:before {
  transform: rotate(180deg);
  display: block;
}
.fc-collapse-btn {
  position: absolute;
  max-width: 20px !important;
  min-width: 20px !important;
  max-height: 20px !important;
  width: 40px !important;
  min-height: 40px !important;
  height: 40px !important;
  padding: 2px;
  background-color: var(--app-background-secondary);
  z-index: 9;
  top: -1px;
  cursor: pointer;
  left: 100%;
  border: 1px solid var(--app-border);
  background-image: url('../../public/assets/icon/png/toggle-icon.png');
  background-size: 12px;
  background-position: center;
  background-repeat: no-repeat;
}

.collapsed {
  height: fit-content !important;
  min-height: 0px !important;
}

.collapsed > .fc-row > .fc-collapsable,
.collapsed > .fc-collapsable {
  display: none;
}
/*---------Collapse button css ends----------*/

/*---------scrollbar css start----------*/
.doc-explorer-contents::-webkit-scrollbar {
  width: 0px;
  height: 0px;
  transition: width 1s;
}
.doc-explorer-contents:hover::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
.doc-explorer-contents:hover::-webkit-scrollbar:hover {
  width: 12px;
  height: 8px;
}
.visible-scrollbar::-webkit-scrollbar-thumb {
  background-color: var(--focus-level-4) !important;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: var(--focus-level-4) !important;
  border-radius: 10px;
}

.scrollbar-thin ::-webkit-scrollbar {
  width: 3px;
  height: 3px;
  display: block;
}
.scrollbar-thin ::-webkit-scrollbar-track {
  background: transparent;
}
.scrollbar-thin ::-webkit-scrollbar-thumb {
  background: var(--focus-level-2) !important;
  border-radius: 10px;
}
.invisible-scrollbar::-webkit-scrollbar,
.invisible-scrollbar > div::-webkit-scrollbar {
  display: none;
}
.visible-scrollbar::-webkit-scrollbar,
.visible-scrollbar > div::-webkit-scrollbar {
  display: block;
  width: 0px;
  height: 0px;
}
.visible-scrollbar:hover::-webkit-scrollbar,
.visible-scrollbar > div:hover::-webkit-scrollbar {
  display: block;
  width: 8px;
  height: 8px;
}
.visible-scrollbar.thick::-webkit-scrollbar {
  width: 8px !important;
  display: block !important;
}
.visible-scrollbar.thin::-webkit-scrollbar {
  width: 4px !important;
  display: none !important;
}
.visible-scrollbar.thin:hover::-webkit-scrollbar {
  width: 4px !important;
  display: block !important;
}

.visible-scrollbar ::-webkit-scrollbar-track {
  background: transparent;
}
.visible-scrollbar ::-webkit-scrollbar-thumb {
  background: var(--focus-level-2) !important;
  border-radius: 10px;
}

/*---------scrollbar css end----------*/

/*-------editor css starts---------*/

.CodeMirror {
  background-color: var(--app-background) !important;
  height: 100% !important;
}

.CodeMirror-gutters {
  background-color: transparent !important;
}

.CodeMirror pre {
  font: 12px / normal 'Monaco', 'Menlo', 'Ubuntu Mono', 'Consolas',
    'source-code-pro', monospace;
}

.react-codemirror2 {
  height: 100%;
}

/*-------editor css end---------*/

/*----------other css  start--------*/

.fc-empty {
  width: 100%;
  align-items: center;
  justify-content: center;
  padding: 24px 16px;
}

.fc-empty-center {
  width: 100%;
  align-items: center;
  justify-content: center;
  padding: 24px 16px;
  display: flex;
  font-size: 12px;
  color: var(--app-foreground-inactive);
}

.fc-empty.center-block {
  display: flex;
}

.CodeMirror-sizer {
  margin-left: 39px !important;
}

.request-tab-wrapper {
  width: calc(100% - 40px);
}
.fc-urlbar-path,
.fc-tab-panel-info > span,
.fc-history-req-list-item-url-text,
.collection_leaf-node-name {
  user-select: text;
}
/*
  * // .json-as-form input.json_row--key, .json-as-form input.json_row--value{
  * //   background: transparent;
  * // }
  */
/*----------other css  end--------*/

/*---code mirror css starts -------*/

.cm-property {
  color: var(--cm-property) !important;
}

.cm-keyword {
  color: var(--cm-keyword) !important;
}

.cm-def {
  color: var(--cm-def) !important;
}

.cm-attribute {
  color: var(--cm-attribute) !important;
}

.cm-number {
  color: var(--cm-number) !important;
}

.cm-string {
  color: var(--cm-string) !important;
}

.CodeMirror-selected {
  background: var(--selected) !important;
}

.cm-punctuation {
  color: var(--cm-punctuation);
}

.cm-ws {
  color: var(--cm-ws);
}

/*---code mirror css ends----------*/

.expandable-right-pane {
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 2s;
}

.expandable-right-pane.expanded {
  transform: scaleX(1);
}

/*--------table temporary css starts ------------*/
.response-headers-table,
.response-cookies-table {
  display: table;
  border-collapse: collapse;
  width: 100%;
}

.response-headers-table > div,
.response-cookies-table > div {
  display: table-row;
}

.response-headers-table > div > div,
.response-cookies-table > div > div {
  display: table-cell;
  border: 1px solid var(--app-border);
  border-collapse: collapse;
  padding: 4px 8px;
  font-size: 14px;
  word-break: break-all;
  color: var(--app-foreground-inactive);
  user-select: text;
}

.response-headers-table > div:first-child,
.response-cookies-table > div:first-child {
  background: var(--focus-level-2);
  font-weight: 600;
}
.response-headers-table > div:first-child > div,
.response-cookies-table > div:first-child > div {
  border-top: 0px solid transparent;
}
.response-headers-table > div > div:first-child,
.response-cookies-table > div > div:first-child {
  border-left: 0px solid transparent;
}
/*--------table temporary css starts ------------*/

/*--------table 2 css starts------------*/
.primary-table .mtk1 {
  color: var(--tab-foreground-inactive) !important;
}
.primary-table th {
  color: var(--heading-color) !important;
}

.table-cell .table-action {
  visibility: hidden;
}
.table-cell:hover .table-action {
  visibility: visible;
}

.table.border-0 .table-row:first-child .table-cell {
  border-top: none;
}

.table.border-0 .table-row:last-child .table-cell {
  border-bottom: none;
}

.table.border-0 .table-row .table-cell:first-child {
  border-left: none;
}

.table.border-0 .table-row .table-cell:last-child {
  border-right: none;
}
/*-----------table 2 css end --------*/

.dropzone-wrapper > .dropzone {
  display: flex;
  width: 100%;
  height: 100%;
  align-items: center;
  flex-direction: column;
  justify-content: center;
}
