/* Tailwind Colors */
$gray-200: rgb(229, 231, 235);
$gray-300: rgb(209, 213, 219);

$neutral-700: #404040;
$neutral-800: #262626;

/* Scrollbar mixin */
@mixin scrollbar($isdark, $iselement) {
  scrollbar-width: thin;

  /* Don't set background to elements */
  @if $isdark == "true" and $iselement == "false" {
    /* @apply bg-neutral-700; */
    background-color: $neutral-700;
  } @else if $isdark == "false" and $iselement == "false" {
    /* @apply bg-gray-300; */
    background-color: $gray-300;
  }

  ::-webkit-scrollbar {
    /* Apply thinner scrollbar for elements */
    @if $iselement == "true" {
      width: 6px;
      height: 6px;
    } @else {
      width: 8px;
      height: 8px;
    }

    @if $isdark == "true" {
      &-thumb {
        /* @apply bg-neutral-700; */
        background-color: $neutral-700;
      }
      &-track {
        /* @apply bg-neutral-800; */
        background-color: $neutral-800;
      }
    } @else {
      &-thumb {
        /* @apply bg-gray-300; */
        background-color: $gray-300;
      }

      &-track {
        /* @apply bg-gray-200; */
        background-color: $gray-200;
      }
    }
  }
}

/* Use the mixin on HTML */
html {
  @include scrollbar("false", "false");

  &.dark {
    @include scrollbar("true", "false");
  }
}

/* Create a class for other elements */
.scrollbar {
  @include scrollbar("false", "true");
}

.dark .scrollbar {
  @include scrollbar("true", "true");
}
