$flagAnimation : 200ms ease-out

// Choose language
.flag-drop-down
  display: block
  position: relative
  top: -2px
  left: 0
  float: left
  +grid-margin-s($top: .25, $right: .25)
  +grid-height-s(.75)
  +grid-width
  border: 2px solid rgba(255,255,255,.25)
  +grid-line-height-s(.75)
  box-sizing: content-box
  border-radius: 5px

  .button-open
    position: absolute
    width: 100%
    height: 100%
    z-index: 10
    cursor: pointer

    &::after
      content: ''
      +position(absolute, 4px 4px null null)
      +icon-sprite(1,1,10px,6px)
      top: 50%
      margin-top: -3px
      @extend %icon-sprite

  ul
    position: absolute
    overflow: hidden
    width: 100%
    +grid-max-height-s(.75)
    text-align: center
    +transition(max-height $flagAnimation)
    border-radius: 5px

  li
    position: relative
    +grid-height-s(.75)
    width: 100%
    background: $blue
    border-top: 2px solid rgba(255,255,255,.25)

  li:first-child
    background: none
    border-top: none

  //li:last-child, li:first-child
    //border-bottom: none

  a
    display: block
    width: 100%
    height: 100%

  .flag
    display: block
    position: absolute
    top: 50%
    left: 15%
    margin-top: -6px
    width: 14px
    height: 12px
    background-size: 14px 12px
    border-radius: 1px
    +transition(left $flagAnimation, margin-left $flagAnimation, transform $flagAnimation)

  &.open
    ul
      max-height: 100px
    .button-open
      //display: none

    .flag
      //left: 50%
      //margin-left: -7px
      +transform(scale(1))