/* ==========================================================================
   Sidebar KMS
   ========================================================================== */

#sidebar
  position: fixed
  top: 0
  left: 0
  height: 100vh
  padding-bottom: 50px
  width: 230px
  background-color: $darkerBlue

  .logo-placeholder
    height: 100px
    width: 100%

    a
      +flex(space-between, center)
      width: 100%
      height: 100%
      padding: 0 20px 0 20px
      text-decoration: none

      img
        width: 40px
        height: 40px

      p
        color: white
        font-size: 0.75rem
        line-height: 1.2

  /* Account block
   ========================================================================== */

  .account-block
    +flex(space-between, center)
    text-decoration: none
    border: 1px solid rgba(255,255,255, 0.2)
    border-left: none
    border-right: none
    padding: 10px 25px
    height: 90px

    figure
      position: relative
      +flex(center, center)
      width: 30px
      height: 30px
      margin: 0
      background-color: rgba($blue, 0.3)
      border-radius: 100%

      &:empty
        &:after
          content: ''
          background:
            image: url("#{$baseImagePath}/icons/user.svg")
            position: center
            size: contain
            repeat: no-repeat
          width: 30px
          height: 30px
          opacity: 0.4

      span
        position: absolute
        left: 0
        top: 0
        display: block
        width: 100%
        height: 100%
        border-radius: 100%
        background:
          position: center
          size: cover
          repeat: no-repeat

    .text
      width: calc(100% - 40px)

      h3
        color: white
        font-size: 0.85rem
        margin: 0

  /* Log out button
   ========================================================================== */

  .log-out
    position: absolute
    bottom: 0
    width: 100%
    height: 50px
    +flex(flex-start, center)
    padding: 0 25px
    background-color: rgba($darkBlue, 0.4)
    border: none
    border-top: solid 1px rgba(255,255,255, 0.2)
    color: white
    text-decoration: none
    font-size: 0.7rem
    transition: background-color 0.4s

    &:hover
      background-color: rgba($darkBlue, 0.6)

.sidebar__order-button-area
  padding: 14px 15px
  border-bottom: 1px solid rgba(255,255,255, 0.2)

.sidebar__order-button
  appearance: none
  display: flex
  justify-content: space-between
  align-items: flex-start
  padding: 8px 10px
  background-color: #FD3438
  color: white
  text-decoration: none
  border-radius: 4px
  font-size: 0.75rem
  font-weight: bold
  transition: opacity 0.1s

  &:hover
    opacity: 0.8

.sidebar__order-button-arrow
  margin-top: 6px