@font-face
  font-family: textbook
  src: local('textbook')
  src:
    url(/res/fonts/textbook.woff2),
    url(/res/fonts/textbook.woff),
    url(/res/fonts/textbook.ttf)

@import "./app_menu.styl"

.main-logo
  display: flex
  font-weight: normal
  align-items: center
  padding: 0
  margin: 0

  & > a

    &, &:hover, &:active, &:visited
      font: normal 22px textbook, sans-serif
      color: #000
      text-decoration: none

  &-container
    display: flex
    height: 40px
    align-items: center
    padding-left: 34px
    position: relative

    &.arrow
      background: #ffdb4d // linear-gradient(90deg, #ff4a48, #ffdb4d 80%)
      border: none
      padding-left: 56px
      padding-right: 16px
      margin-left: -32px

      &:before
        content: ""
        width: 0
        height: 0
        border-style: solid
        border-color: rgba(#ffdb4d, 0)
        border-left-color: #ffdb4d
        border-width: 25px 0 25px 13px
        transform: translateY(-50%)
        -o-transform: rotate(360deg)
        position: absolute
        right: -13px
        top: 50%

      .app-menu
        background: #f6f6f6
        border: none
        border-top: 1px solid #eee
        border-right: 1px solid #ddd
        box-sizing: border-box
        overflow: auto

        & > ul, & > p
          background: transparent
          border-top-color: #ddd
          padding: 12px 0

        & > ul > li > a,
        & > ul > li > span,
        & > p
          padding-left: 22px
          padding-right: 22px

        &:before
          display: none

      .app-menu-button-container
        left: 22px

        &:hover .app-menu
          margin-left: -22px

    .app-menu-button
      width: 16px
      height: 16px
      background: url("/res/common/menu.svg") 0 0/16px no-repeat
      margin-right: 16px
      cursor: pointer

      &-container
        display: flex
        height: 100%
        align-items: center
        position: absolute
        left: 0
        top: 0

        .app-menu
          transform: translate(-100%, 0)
          transition: opacity .15s
          opacity: 0
          margin-top: -2000px
          position: absolute
          left: 0
          top: 0
          z-index: 9000

        &:hover .app-menu
          display: block
          transform: translate(0, 0)
          margin: 35px 0 0 -32px
          opacity: 1

  &-icon img
    height: 20px
    margin: 0 18px 0 0

  &-title,
  &-subtitle
    display: block
    font-size: 0

  &-title
    margin-right: 5px

  &-subtitle
    padding-right: 21px
    position: relative

    &:after
      content: "A"
      display: block
      width: 16px
      height: 16px
      font-size: 9px
      line-height: 16px
      text-align: center
      color: #111
      background: #ffdb4d
      border-radius: 50%
      position: absolute
      right: 0
      top: 6px
