import { style } from '@vanilla-extract/css';

import { vars } from '../css';

const scrollAreaVars = vars.components.scrollArea;

export const scrollArea = style({
  overflow: 'auto',

  '::-webkit-scrollbar': {
    width: scrollAreaVars.sizes.width,
    height: scrollAreaVars.sizes.width,

    borderWidth: '0px',
    borderStyle: 'solid',
    borderColor: scrollAreaVars.colors.border,
  },

  '::-webkit-scrollbar-thumb': {
    border: '3px solid transparent',
    borderRadius: scrollAreaVars.sizes.width,

    backgroundColor: scrollAreaVars.colors.thumb,
    backgroundClip: 'content-box',
  },

  '::-webkit-scrollbar-corner': {
    border: `0px solid ${scrollAreaVars.colors.border}`,
    borderTopWidth: scrollAreaVars.borderWidths.track,
    borderLeftWidth: scrollAreaVars.borderWidths.track,
  },

  selectors: {
    '&::-webkit-scrollbar:vertical': {
      borderLeftWidth: scrollAreaVars.borderWidths.track,
    },

    '&::-webkit-scrollbar:horizontal': {
      borderTopWidth: scrollAreaVars.borderWidths.track,
    },

    '&::-webkit-scrollbar-thumb:vertical': {
      borderWidth: '2px 3px',
    },

    '&::-webkit-scrollbar-thumb:horizontal': {
      borderWidth: '3px 2px',
    },

    '&::-webkit-scrollbar-thumb:hover': {
      backgroundColor: scrollAreaVars.colors['thumb-hover'],
    },
  },
});