@use "sass:color";
@use "./variables.reset" as *;
@use "cx/src/util/scss/global";

// Scrollbar Style
@if ($cx-include-global-rules) {
   @media screen and (min-width: 700px) {
      ::-webkit-scrollbar {
         width: 10px;
         height: 10px;
         background-color: $cx-theme-default-background-color-dark;
      }

      ::-webkit-scrollbar-thumb {
         -webkit-border-radius: 8px;

         &:vertical {
            background-color: color.adjust($cx-theme-default-background-color-light, $lightness: 6%);

            &:hover {
               background-color: color.adjust($cx-theme-default-background-color-light, $lightness: 8%);
            }
         }

         &:horizontal {
            background-color: color.adjust($cx-theme-default-background-color-light, $lightness: 8%);

            &:hover {
               background-color: color.adjust($cx-theme-default-background-color-light, $lightness: 10%);
            }
         }
      }

      ::-webkit-scrollbar-corner {
         background-color: color.adjust($cx-theme-default-background-color-light, $lightness: -2%);
         border-left: 1px solid $cx-default-border-color;
         border-top: 1px solid $cx-default-border-color;
         -webkit-box-shadow: color.adjust($cx-theme-default-background-color, $lightness: -3%) 0 1px inset;
      }
   }
}