@import url("https://fonts.googleapis.com/css?family=Manrope:300,400,500,600,700,800,900&display=swap");

html {
  scroll-behavior: smooth;
  font-family: 'Manrope', sans-serif !important;
}

h1 {
  @apply text-5xl;
}
h2 {
  @apply text-4xl;
}
h3 {
  @apply text-3xl;
}
h4 {
  @apply text-2xl;
}
h5 {
  @apply text-xl;
}
h6 {
  @apply text-lg;
}

code {
  @apply inline rounded font-semibold p-1;
}
pre {
  @apply block rounded whitespace-pre-wrap font-semibold p-2;
}

ul {
  @apply list-none;
}

*,
input,
select,
textarea,
option,
button {
  outline: none !important;
  &:focus {
    outline: none !important;
  }
}

/*******************
 * hide scrollbars *
 *******************/
::-webkit-scrollbar {
  /* display: none;
  width: 0 !important; */
}
.disable-scrollbars {
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE 10+ */
}

#__next {
  width: 100%;
  min-width: 100%;
  height: 100%;
  min-height: 100%;
  padding: 0;
  margin: 0;
  overflow-x: hidden;
  position: relative;
}

body {
  @apply antialiased text-sm disable-scrollbars;
}

[data-background="light"] {
  @apply text-slate-900;
  code,
  pre {
    @apply bg-slate-100;
  }
}

[data-background="dark"] {
  @apply text-white;
  code,
  pre {
    @apply bg-slate-800;
  }
}
.link {
  @apply text-blue-400 dark:text-blue-500;
}

.ring-red {
  box-shadow: 0 0 0 3px theme("colors.red.300");
}
.ring-green {
  box-shadow: 0 0 0 3px theme("colors.green.300");
}
.ring-white {
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 1);
}
.ring-black {
  box-shadow: 0 0 0 3px rgba(0, 0, 0, 1);
}

/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-results-button,
input[type="search"]::-webkit-search-results-decoration {
  -webkit-appearance:none;
}

/* Firefox */
input[type=number] {
  -moz-appearance: textfield;
}

.wrapper {
  min-height: calc(100vh - 96px);
}

.text-2xs {
  font-size: .65rem;
}

.text-3xs {
  font-size: .5rem;
}

.backdrop-blur-8 {
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.backdrop-blur-16 {
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

.linkify a {
  @apply text-blue-400 dark:text-white font-semibold;
}

.status-message a {
  @apply underline font-extrabold;
}

a {
  .underline {
    text-decoration-line: underline;
  }
}

.w-70 {
  width: 17.5rem;
}

.\3xl\:w-96 {
  width: 21rem !important;
}

.max-w-2md {
  max-width: 466px;
}

.max-w-6\.5xl {
  max-width: 76rem;
}

.mt-0\.25 {
  margin-top: 0.0625rem;
}

.mt-4\.5 {
  margin-top: 18px !important;
}

.mt-5\.5 {
  margin-top: 1.375rem;
}

.p-4\.5 {
  padding: 1.125rem !important;
}

#modal-chains,
#modal-assets {
  .show {
    animation-duration: 0.1s !important;
  }
}

.alert-box {
  .transition-all {
    @apply right-0 ml-auto;
    position: initial !important;
    [role=button] {
      padding: 1px;
      svg {
        @apply w-5 h-5;
      }
    }
  }
}

.xerc20-warning-modal {
  max-width: 466px !important;
  .body {
    @apply dark:bg-slate-850 border dark:border-slate-750 rounded-sm shadow-none;
    .content {
      @apply py-2.5 px-3;
    }
  }
}