Cacher is the code snippet organizer for pro developers

//- breadcrumbs
mixin breadcrumbs(...itemText)
	+b.breadcrumbs&attributes(attributes)
		ul
			each text, i in itemText
				li(class= i === itemText.length - 1 ? 'is-active' : ''): a(href='#!')= text

//- pagination
mixin pagination(classMod)
	+b.pagination(class= classMod || '_default')
		ul
			li
				a(href='#!'): +i('arr-l')
			li.is-active
				a(href='#!') 1
			li
				a(href='#!') 2
			li
				a(href='#!') 3
			li
				a(href='#!') 4
			li
				a(href='#!') 5
			li
				a(href='#!') ...
			li
				a(href='#!') 7
			li
				a(href='#!') 8
			li
				a(href='#!') 9
			li
				a(href='#!'): +i('arr-r')

.breadcrumbs
   margin-bottom: 55px
   ul
      font-size: 0
      li
         display: inline-block
         vertical-align: middle
         line-height: 22px
         &:not(:last-child)
            margin-right: 10px
         &:not(:last-child)::after
            display: inline-block
            vertical-align: middle
            margin-left: 8px
            pointer-events: none
            font-size: 15px
            content: '/'
         &.is-active a
            pointer-events: none
            color: #9d9d9d
         a
            display: inline-block
            vertical-align: middle
            font-size: 11px
            letter-spacing: 0.66px
            color: #252525
            +trs
            &:hover
               opacity: .5

.pagination
   text-align: center
   &_default
      margin: 70px 0 0
      +sm
         margin: 50px 0 0
   &_catalog
      margin: 90px 0 0
      +sm
         margin: 60px 0 0
      +xs
         margin: 40px 0 0
   ul
      margin-bottom: 13px
      font-size: 0
      line-height: 0
      li
         display: inline-block
         vertical-align: middle
         position: relative
         margin: 0 12px
         &:first-child
            margin-right: 17px
         &:last-child
            margin-left: 17px
         +xs
            margin: 0 7px
         &.is-active
            &::after
               +vcenter
               z-index: -1
               width: 35px
               height: 35px
               margin-top: -2px
               background-color: #ececec
               border-radius: 50%
               content: ''
            a
               pointer-events: none
         
         a
            font-weight: 400
            text-align: center
            font-size: 16px
            color: #181818
            +trs
            &:hover
               color: rgba(#181818, .5)
               .icon
                  fill: rgba(#181818, .5)
            .icon
               vertical-align: 4px
               font-size: 12px
               +trs