@import url("./fflag.css");

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

body {
   background-color: #f8f9ff;
}

.domKeywords {
   min-height: 70vh;
   border-color: #e9ebff;
   box-shadow: 0 0 20px rgb(20 34 71 / 5%);
}

.customShadow {
   border-color: #e9ebff;
   box-shadow: 0 0 20px rgb(20 34 71 / 5%);
}

.styled-scrollbar {
   scrollbar-color: #d6dbec transparent;
   scrollbar-width: thin;
}

.styled-scrollbar::-webkit-scrollbar {
   width: 6px;
   height: 6px;
   border-radius: 0;
   background: #f5f7ff;
   margin-right: 4px;
   border: 0 solid transparent;
}

.styled-scrollbar::-webkit-scrollbar-thumb {
   width: 6px;
   height: 6px;
   border-radius: 0;
   color: #d6dbec;
   background: #d6d8e1;
   border: 0 solid transparent;
   box-shadow: none;
}

.ct-area {
   fill: #10b98d73;
}

.ct-label.ct-horizontal {
   font-size: 11px;
}

.ct-label.ct-vertical {
   font-size: 12px;
}

.chart_tooltip {
   width: 95px;
   height: 75px;
   background-color: white;
   position: absolute;
   display: none;
   padding: 0 8px;
   box-sizing: border-box;
   font-size: 12px;
   text-align: left;
   z-index: 1000;
   top: 12px;
   left: 12px;
   pointer-events: none;
   border: 1px solid;
   border-radius: 4px;
   border-color: #a7aed3;
   box-shadow: 0 0 10px rgb(0 0 0 / 12%);
   font-family: "Trebuchet MS", Roboto, Ubuntu, sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
}

.react_toaster {
   font-size: 13px;
}

.domKeywords_head--alpha_desc .domKeywords_head_keyword::after,
.domKeywords_head--pos_desc .domKeywords_head_position::after {
   content: "↓";
   display: inline-block;
   margin-left: 2px;
   font-size: 14px;
   opacity: 0.8;
}

.domKeywords_head--alpha_asc .domKeywords_head_keyword::after,
.domKeywords_head--pos_asc .domKeywords_head_position::after {
   content: "↑";
   display: inline-block;
   margin-left: 2px;
   font-size: 14px;
   opacity: 0.8;
}

.keywordDetails__section__results {
   height: calc(100vh - 550px);
}

.settings__content {
   height: calc(100vh - 185px);
   overflow: auto;
}

/* Animation */
.modal_anim-enter {
   opacity: 0;
}

.modal_anim-enter-active {
   opacity: 1;
   transition: opacity 300ms;
}

.modal_anim-enter .modal__content {
   transform: translateY(50px);
}

.modal_anim-enter-active .modal__content {
   transform: translateY(0);
   transition: all 300ms;
}

.modal_anim-exit {
   opacity: 1;
}

.modal_anim-exit-active {
   opacity: 0;
   transition: all 300ms;
}

.modal_anim-exit .modal__content {
   transform: translateY(0);
}

.modal_anim-exit-active .modal__content {
   transform: translateY(50px);
   transition: all 300ms;
}

.settings_anim-enter {
   opacity: 0;
   transform: translateX(400px);
}

.settings_anim-enter-active {
   opacity: 1;
   transform: translateX(0);
   transition: all 300ms;
}

.settings_anim-exit {
   opacity: 1;
   transform: translateX(0);
}

.settings_anim-exit-active {
   opacity: 0;
   transform: translateX(400px);
   transition: all 300ms;
}

@media (min-width: 1024px) {
   /* Domain Header Button Tooltips */
   .domheader_action_button:hover i {
      visibility: visible;
      opacity: 1;
   }

   .domheader_action_button i {
      display: block;
      position: absolute;
      width: 100px;
      left: -40px;
      top: -22px;
      background: #222;
      border-radius: 3px;
      color: #fff;
      font-size: 12px;
      padding-bottom: 3px;
      transition: all 0.2s linear;
   }

   .domheader_action_button i::after {
      content: "";
      width: 0;
      height: 0;
      border-style: solid;
      border-width: 5px 5px 0;
      border-color: #222 transparent transparent;
      bottom: -5px;
      position: absolute;
      left: 0;
      right: 0;
      margin: 0 auto;
   }
}