.menu-button
  +position(absolute, 0 3.4rem null null)
  width: 2.4rem
  height: 8rem
  z-index: 12
  padding: 2.8rem 0
  +MQ(XL)
    +position(absolute, 0 6rem null null)
  +MQ(XXL)
    +position(absolute, 0 8rem null null)
    height: 9rem
    padding: 3.3rem 0

.menu-trigger
  display: block
  position: relative
  width: 2.4rem
  height: 2.4rem
  .circle
    display: block
    position: absolute
    +center
    width: 4rem
    height: 4rem
    border-radius: 50%
    border: 2px solid $white
    transform: translateX(-50%) translateY(-50%) scale(0)
    transition: transform .3s cubic-bezier(0.23, 0.65, 0.74, 1.09)
  .burger
    display: block
    position: absolute
    left: 0
    +center(y)
    width: 2.4rem
    height: 2px
    background-color: transparent
    border-radius: 1px
    &::before,
    &::after
      content: ""
      display: block
      position: absolute
      top: 0
      +center(x)
      width: 100%
      height: 100%
      background-color: $white
      border-radius: 1px
      transition: all .3s cubic-bezier(0.23, 0.65, 0.74, 1.09)
    &::before
      transform: translateX(-50%) translateY(-4px)
    &::after
      transform: translateX(-50%) translateY(4px)
  .no-touch &:hover
    .circle
      transform: translateX(-50%) translateY(-50%) scale(1)
    .burger
      &::before,
      &::after
        transform: translateX(-50%) translateY(0) rotate(0)
        height: 4px
        width: 4px
        border-radius: 50%
  &.menu-opened
    .burger
      &::before
        transform: translateX(-50%) translateY(0) rotate(45deg)
      &::after
        transform: translateX(-50%) translateY(0) rotate(-45deg)


.btn
  position: relative
  display: inline-block
  border: none
  outline: 0
  padding: 0
  font: inherit
  background-color: transparent
  cursor: pointer
  text-decoration: none
  user-select: none
  overflow: hidden
  text-align: center
  +MQ(M)
    display: inline-block

.btn-l
  display: block
  margin-right: 0
  margin-bottom: 1.4rem
  height: 4rem
  padding: 0 2rem
  border: 2px solid $white
  border-radius: 2rem
  font: normal 600 1.4rem/3.6rem $default-font
  color: $text-light
  &:last-of-type
    margin-bottom: 0
    margin-right: 0
  .btn-title
    display: block
    position: relative
    transform: translateY(0)
    transition: transform .3s cubic-bezier(0.23, 0.65, 0.74, 1.09)
  .btn-hover
    display: block
    +position(absolute, 0 null null 0)
    width: 100%
    transform: translateY(100%)
    transition: transform .3s cubic-bezier(0.23, 0.65, 0.74, 1.09)
  .no-touch &:hover
    .btn-title
      transform: translateY(-100%)
    .btn-hover
      transform: translateY(0)
  +MQ(S)
    display: inline-block
    margin-right: 2rem
    margin-bottom: 0
    &:last-of-type
      margin-right: 0

.btn-l-icon
  display: block
  position: relative
  margin-right: 0
  margin-bottom: 1.4rem
  height: 4rem
  padding: 0 4.5rem 0 2rem
  border-radius: 2rem
  font: normal 600 1.4rem/3.6rem $default-font
  &:last-of-type
    margin-bottom: 0
    margin-right: 0
  span,
  i
    display: inline-block
  .btn-icon-anim
    display: block
    +position(absolute, 0 2rem null null)
    width: auto
    height: 3.6rem
    overflow: hidden
  .no-touch &:hover
    i
      animation: 0.4s ease-in-out 0s 1 both slideOutLeft
  +MQ(S)
    display: inline-block
    margin-right: 2rem
    margin-bottom: 0
    &:last-of-type
      margin-right: 0

.btn-outline-light
  border: 2px solid $white
  background-color: transparent
  color: $text-light

.btn-light
  font-weight: 700
  border: 2px solid $white
  background-color: $white
  color: $text-dark

.btn-s-text
  display: block
  font: normal 600 1.4rem/1.6 $default-font
  color: $text-light
  .title
    display: block
    position: relative
    font-size: 1.4rem
    color: $text-light
    transform: translateY(0)
    transition: transform .3s cubic-bezier(0.23, 0.65, 0.74, 1.09)
  .hover
    display: block
    +position(absolute, 0 null null 0)
    font-size: 1.4rem
    color: $text-light
    transform: translateY(100%)
    transition: transform .3s cubic-bezier(0.23, 0.65, 0.74, 1.09)
  .no-touch &:hover
    .title
      transform: translateY(-100%)
    .hover
      transform: translateY(0)

.btn-s
  +position(absolute, 2.4rem 5.8rem null null)
  width: 3.4rem
  height: 3.4rem
  margin-right: 2rem
  font: normal 600 1.4rem/3.4rem $default-font
  color: $text-light
  i
    display: inline-block
  .title
    display: none
    position: relative
    font-size: 1.4rem
    color: $text-light
    transform: translateY(0)
    transition: transform .3s cubic-bezier(0.23, 0.65, 0.74, 1.09)
  .hover
    display: none
    +position(absolute, 0 null null 0)
    font-size: 1.4rem
    color: $text-light
    transform: translateY(100%)
    transition: transform .3s cubic-bezier(0.23, 0.65, 0.74, 1.09)
  .no-touch &:hover
    .title
      transform: translateY(-100%)
    .hover
      transform: translateY(0)
  +MQ(M)
    margin-right: 3.4rem
  +MQ(XL)
    width: auto
    +position(absolute, 2.3rem 8.4rem null null)
    i
      display: none
    .title
      display: block
    .hover
      display: block
  +MQ(XXL)
    +position(absolute, 2.8rem 10.4rem null null)

@keyframes slideOutLeft
  0%
    transform: translateX(0)
  50%
    transform: translateX(14px)
  51%
    opacity: 0
  52%
    transform: translateX(-14px)
    opacity: 0
  53%
    opacity: 1
  100%
    transform: translateX(0)

@keyframes slideOutRight
  0%
    transform: translateX(0)
  50%
    transform: translateX(-14px)
  51%
    opacity: 0
  52%
    transform: translateX(14px)
    opacity: 0
  53%
    opacity: 1
  100%
    transform: translateX(0)
