aaa

// region variables 
//$isTicks: true 
//$cv-margin: 0 
//$cv-item-width: 27px
//$cv-col-offset: 10px
//$cv-tick-size: 10px
//$cx-margin: 0 
//$cx-item-width: 27px
//$cx-col-offset: 10px
//$cx-tick-size: 10px
//
//@if $isTicks
//  $cv-margin: $cv-item-width + $cv-col-offset + $cv-tick-size
//@else
//  $cv-margin: $cv-item-width + $cv-col-offset
  
// endregion 
+m(ticks)
  //margin-left: $cv-margin
  //width: calc(100% - #{$cv-margin})
//+e(y-ticks-wrapper)
  position: relative
//+m(y)
//  --chart-y-items: 4
//  --chart-y-rows: calc(#{var(--chart-y-items)} - 1)
//  --container-y-height: calc(100% + 100% / var(--chart-y-rows))
//  $translateY: calc(100% / var(--chart-y-items) / -2) 
//  display: flex
//  flex-direction: column
//  position: absolute
//  @if $isTicks
//    left: calc(-1 * #{$cv-col-offset * 2} - #{$cv-tick-size})
//  @else
//    left: calc(-1 * #{$cv-col-offset })
//  height: var(--container-y-height)
//  transform: translateX(-100%) translateY($translateY)
//  justify-content: space-around
//  
//  +e(item)
//    white-space: nowrap
//    display: flex
//    align-items: center
//    justify-content: flex-end
//    position: relative
//    @if $isTicks
//      &:after
//        display: block
//        position: absolute
//        width: $cv-tick-size
//        height: 1px
//        right: -$cv-col-offset
//        top: 0
//        bottom: 0
//        margin-top: auto
//        margin-bottom: auto
//        transform: translatex(100%)
//        background: var(--gray-dark)
//        content: ""
//    

  
//  --chart-x-items: 8
//  --chart-x-cols: calc(#{var(--chart-x-items)} - 1)
//  --container-x-width: calc(100% + 100% / #{var(--chart-x-cols)})
//  @if $isTicks
//    margin-top: $cx-col-offset * 2 + $cx-tick-size
//  @else 
//    margin-top: 15px
//    
//  display: flex
//  width: var(--container-x-width)
//  @if $isTicks
//    +e(item)
//      position: relative
//      &:after
//        height: $cx-tick-size
//        top: -$cx-col-offset + 1px
//        transform: translateY(-100%)
//        background: var(--gray-dark)
//        display: block
//        position: absolute
//        width: 1px
//        right: 0
//        left: 0
//        margin-left: auto
//        margin-right: auto
//        content: ""
//  
//
//+m(x-horizontal)
//  margin-left: calc(-100% / var(--chart-x-cols) / 2)
//  +e(item)
//    font-size: var(--chart-font-size)
//    width: calc(100% / var(--chart-x-cols))
//    text-align: center
//    &:first-child,
//    &:last-child
//      visibility: hidden
//    
//+m(x-vertical)
//  --chart-item-width: var(--chart-font-size)
//  margin-left: calc(var(--chart-item-width) / 2 * -1)
//  +e(item)
//    font-size: var(--chart-font-size)
//    width: var(--chart-font-size)
//    display: flex
//    align-items: center
//    margin-right: calc(calc(calc(100% - 2px) / #{var(--chart-x-items)}) - var(--chart-item-width))
//    writing-mode: vertical-rl
//    transform: rotate(180deg)