.accordion-menu
  display: flex
  flex-direction: row
.accordion-menu:hover .accordion-active
  flex: 1
  .accordion-trigger .accordion-content
    display: none
  &:hover
    flex: 4
    .accordion-trigger .accordion-content
      display: inline-block

.accordion-type-hover
  flex: 1
  height: 100%
  transition: flex 0.8s ease
  width: 106px
  box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12)
  .accordion-trigger
    display: flex
    align-items: center
    justify-content: center
    line-height: normal
    position: relative
    padding: 0px 8px
    min-width: 32px
    height: 100%
    width: 100%
    border-radius: 0
.accordion-default
  &:hover
    background-color: #2F3133
    flex: 4
    .accordion-active
      flex: 1
      .accordion-content
        display: none
    .accordion-content
      display: inline-block
.accordion-active
  background-color: #868a88
  flex: 4
  .accordion-content
    display: inline-block
.accordion-content
  padding: 0px 8px
  display: none
.accordion-type-click
  width: 100%
.accordion-header
  display: block
.trigger-right
  float: right
.trigger-left
  float: left
.header-is-trigger
  cursor: pointer
