html{
    // scroll-behavior: smooth; // stopped because of router bugs!
    &, *{
      -webkit-tap-highlight-color: transparent;
      &:focus{
        outline: none;
      }
    }
}
@media (min-width: 1280px){
  .container {
      max-width: 1350px;
  }
}

.text-family{
  font-family: 'open sans', 'droid';
}

// remove outline on click or focus
a, button, .btn{
    &:focus{
        outline: none!important;
    }
    text-transform: unset!important;
    &.disabled, &[disabled]{
      @apply text-gray-500 cursor-default;
      &:hover{
        @apply text-gray-500;
      }
    }
    &.nuxt-link-active{
      &.disabled, &[disabled]{
        @apply text-gray-500 cursor-default;
      }
    }
}

@media (min-width: 1024px){
  .overflow-y-auto, .lg\:overflow-y-auto{
      &::-webkit-scrollbar{
          background: hsl(0, 0%, 100%);
          height:11px;
          width:6px;
      }

      &::-webkit-scrollbar-track{
          // border-radius: 5px;
      }
      &::-webkit-scrollbar-thumb{
          background: rgba(0,0,0, 0.15);
          border-radius: 6px!important;
      }
      &::-webkit-scrollbar-thumb:hover{
          background: rgba(0,0,0, .25);
      }
      /* &::-webkit-scrollbar-thumb:active{
          background: rgba(0,0,0, .25);
      } */

  }

  .dark-mode{
    .overflow-y-auto, .lg\:overflow-y-auto, .CodeMirror-vscrollbar{
      &::-webkit-scrollbar{
          background: theme('colors.dark.elevatedSurface');
          height:11px;
          width:7px;
      }
      &::-webkit-scrollbar-thumb{
          background: rgba(255, 255, 255, 0.2);
          border-radius: 6px!important;
      }
      &::-webkit-scrollbar-thumb:hover{
          background: rgba(255, 255, 255, 0.3);
      }

    }
  }
}

html.dark-mode{
  // apply to html (main scrollbar) if this class applied

  &::-webkit-scrollbar{
    background: theme('colors.dark.elevatedSurface');
    height:20px;
    width:12px;
  }
  &::-webkit-scrollbar-track{
      // background-color: theme('colors.dark.surface');
      background-color: #000;
      padding: 4px!important;
  }
  &::-webkit-scrollbar-thumb{
    background: rgba(255, 255, 255, 0.2);
    border-radius: 0px!important;
  }
  &::-webkit-scrollbar-thumb:hover{
      background: rgba(255, 255, 255, 0.3);
  }
}

.ltr-dir{
  text-align: left;
  &, div{
    direction: ltr;
  }
}

.rtl-dir{
  text-align: right;
  &, div{
    direction: rtl;
  }
}
