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

/*
Normalization
=============
*/
html,
body {
  padding: 0;
  margin: 0;
}

a {
  outline: none;
  color: inherit;
  text-decoration: none;
}

select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='%23010101'><polygon points='0,0 100,0 50,50'/></svg>")
    no-repeat;
  background-size: 8px;
  background-position: 92% 60%;
  background-repeat: no-repeat;
  cursor: pointer;
}

select:focus {
  outline: none;
}

/*
Text and shadows
================
*/

.black-shadow {
  text-shadow: 0 0 #010101;
}

/* 
Scrollbar Overrides
===================
*/

body {
  scroll-behavior: smooth;
  scrollbar-width: thin;
}

/* phones */
@media only screen and (max-width: 767px) {
  ::-webkit-scrollbar {
    width: 0;
  }
}

/*
Input Overrides
===============
*/

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

/* clears the ‘X’ from Internet Explorer */
input[type='search']::-ms-clear {
  display: none;
  width: 0;
  height: 0;
}
input[type='search']::-ms-reveal {
  display: none;
  width: 0;
  height: 0;
}

/* clears the ‘X’ from Chrome */
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 {
  display: none;
}

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

input[type='date'],
input[type='datetime'],
input[type='datetime-local'] {
  font-size: 0.95em;
}

/*
Responsiveness
==============
*/
@media only screen and (max-width: 479px) {
  /* phones */
  html {
    font-size: 0.9rem;
  }
}
@media only screen and (max-width: 359px) {
  /* small phones */
  html {
    font-size: 0.8rem;
  }
}

/*
Common animations
=================
*/

@keyframes fadeOut {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

/*
Toasts
======
*/
:root {
  --toastify-color-light: #ffffff;
  --toastify-color-dark: #2e3338;
  --toastify-color-info: #3498db;
  --toastify-color-success: #35d07f;
  --toastify-color-warning: #fcd34d;
  --toastify-color-error: #dc2626;
  --toastify-color-transparent: rgba(255, 255, 255, 0.7);

  --toastify-icon-color-info: var(--toastify-color-info);
  --toastify-icon-color-success: var(--toastify-color-success);
  --toastify-icon-color-warning: var(--toastify-color-warning);
  --toastify-icon-color-error: var(--toastify-color-error);

  --toastify-toast-width: 300px;
  --toastify-toast-background: #fff;
  --toastify-toast-min-height: 64px;
  --toastify-toast-max-height: 800px;
  --toastify-font-family: Roboto, sans-serif;
  --toastify-z-index: 9999;

  --toastify-text-color-light: #2e3338;
  --toastify-text-color-dark: #fff;

  --toastify-text-color-info: #fff;
  --toastify-text-color-success: #fff;
  --toastify-text-color-warning: #fff;
  --toastify-text-color-error: #fff;

  --toastify-spinner-color: #616161;
  --toastify-spinner-color-empty-area: #e0e0e0;

  --toastify-color-progress-light: linear-gradient(
    to right,
    #4cd964,
    #5ac8fa,
    #007aff,
    #34aadc,
    #5856d6,
    #ff2d55
  );
  --toastify-color-progress-dark: #bb86fc;
  --toastify-color-progress-info: var(--toastify-color-info);
  --toastify-color-progress-success: var(--toastify-color-success);
  --toastify-color-progress-warning: var(--toastify-color-warning);
  --toastify-color-progress-error: var(--toastify-color-error);
}

/*
Timeline tweaks
===============
*/

.timeline-container h4 {
  font-size: clamp(0.75rem, 0.825rem, 0.9rem);
}

/*
Fixes for cosmos chain selection modal
====================================
*/
div[data-floating-ui-portal] > div {
  z-index: 10000;
}
