ul.content
  li#content-item-01.content__item
    div.content__item__text
      | item1
  li#content-item-02.content__item
    div.content__item__text
      | item2
  li#content-item-03.content__item
    div.content__item__text
      | item3

@import 'nib'

cWidth = 30px
sWidth = 200px

createGradient(type, str)
  dev = 20
  spl = 100 / dev
  for i in (0..dev)
    if i % 2 == 1
      if i
        str = str + ',#888 ' + ((i - 1) * spl) + '.01%'
      str = str + ',#888 ' + (i * spl) + '%'
    else
      if i
        str = str + ',#000 ' + ((i - 1) * spl) + '.01%'
      str = str + ',#000 ' + (i * spl) + '%'
  if type == 'linear'
    str = 'linear-gradient(' + str + ')'
  else
    str = 'radial-gradient(' + str + ')'
  background-image unquote(str)

body
  display flex
  flex-flow row nowrap
  align-items center
  justify-content stretch
  min-height 100vh

.content
  width 100%
  min-height 100vh
  background-color #ff0
  display flex
  flex-flow row nowrap
  align-items stretch
  justify-content stretch
  
  &__item
    display inline-block
    background-color #0ff
    width 33%
    flex-grow 1
    flex-shrink 1
    display flex
    flex-flow column nowrap
    justify-content center
    align-items center
    position relative
    overflow hidden
    transition all .2s ease 0s
    z-index 10

    &__text
      size 80px
      background-color #fff
      display flex
      flex-flow column nowrap
      justify-content center
      align-items center
      border-radius 50%
      position relative
      z-index 4
      font-size 14px
      transition all .2s ease 0s

    &:hover
      width 50%
      flex-glow 2

      & ^[1]__text
        size 120px
        font-size 18px

    &::before
    &::after
      content ''
      absolute left 50% top 50%
      size 100vmax
      margin-top -50vmax
      margin-left -50vmax
      animation-duration 20s
      animation-timing-function linear
      animation-delay 0s
      animation-iteration-count infinite
      animation-direction normal
      
    &::before
      mix-blend-mode overlay
      animation-name cont_anim1
      z-index 1

    &::after
      mix-blend-mode overlay
      animation-name cont_anim2
      z-index 2
    
    color-high = #aaa
    color-low = #888

    &:nth-child(1)
      background-image linear-gradient(
        bottom left,
        #ff8 0%,
        #f88 100%
      )
      
      &::before
        background-image repeating-linear-gradient(
          -45deg,
          color-high 0px, color-high 10px,
          color-low 10px, color-low 20px
        )

      &::after
        background-image repeating-linear-gradient(
          45deg,
          color-high 0px, color-high 10px,
          color-low 10px, color-low 20px
        )

    &:nth-child(2)
      background-image linear-gradient(
        bottom left,
        #f8f 0%,
        #88f 100%
      )
      
      &::before
        background-image repeating-radial-gradient(
          -45deg,
          color-high 0%, color-high 2%,
          color-low 2%, color-low 4%
        )
        animation-name cont_anim3

      &::after
        background-image repeating-linear-gradient(
          45deg,
          color-high 0px, color-high 10px,
          color-low 10px, color-low 20px
        )

    &:nth-child(3)
      background-image linear-gradient(
        bottom left,
        #8ff 0%,
        #8f8 100%
      )
      
      &::before,
      &::after
        background-image radial-gradient(
          color-low 40%,
          transparent 0
        ), radial-gradient(
          color-low 40%,
          transparent 0
        )
        background-color color-high
        background-position 0 0, 10px 10px
        background-size 20px 20px

  @keyframes cont_anim1
    to
      transform rotate(0deg)
    from
      transform rotate(360deg)

  @keyframes cont_anim2
    to
      transform rotate(360deg)
    from
      transform rotate(0deg)

  @keyframes cont_anim3
    0%
      size 100vmax
      margin-top -50vmax
      margin-left -50vmax
    50%
      size 200vmax
      margin-top -100vmax
      margin-left -100vmax
    100%
      size 100vmax
      margin-top -50vmax
      margin-left -50vmax