.account-overview
  header
    +flex(space-between, center)
    padding: 0 16px
    height: 60px

    h1
      +semibold
      color: $blue
      font-size: 18px
      line-height: 22px
      margin: 0

    a
      text-decoration: none
      color: $mobileBlack
      font-size: 15px
      line-height: 15px
      position: relative

      &:after
        content: '›'
        +semibold
        color: $mobileBlack
        font-size: 28px
        line-height: 3px
        position: relative
        margin-left: 3px
        top: 2px

  .customer-logout
    +flex(space-between, center)
    padding: 0 16px
    height: 80px
    background-color: $mobileGray

    .account
      +flex(flex-start, center)
      .icon
        margin-right: 12px
        +icon-sprite-mobile(-30px -110px, 24px, 24px)

      .text
        +regular
        color: $lightGreyFont
        font-size: 14px
        line-height: 14px
        strong
          display: block
          +semibold
          color: $mobileBlack
    .log-out
      +semibold
      color: $blue
      font-size: 14px
      line-height: 15px
      text-decoration: none

  .customer-detail
    padding: 0 16px 30px
    .placeholder
      background-color: white
      border-radius: 4px
      padding: 20px 16px
      h2
        margin-bottom: 0
        font-size: 15px

      p
        margin: 0
      .inline-link
        text-decoration: none
        color: $blue
        font-size: 15px
        line-height: 18px
        display: block
        margin-top: 15px

  >h2
    +semibold
    font-size: 20px
    line-height: 24px
    color: $mobileBlack
    padding: 0 16px 16px
    margin: 0
    background-color: $mobileGray

  .order-list
    padding: 0 16px 30px
    background-color: $mobileGray

    .no-orders
      margin: 0
      padding: 16px
      +regular
      font-size: 15px
      line-height: 22px
      color: $mobileBlack
      background-color: white
      border-radius: 8px


    .article-order
      background-color: white
      border-radius: 4px
      margin-bottom: 20px
      padding: 16px 0

      &:last-of-type
        margin-bottom: 0
      .title-order-block
        position: relative
        padding: 0 40px 16px 16px

        .title
          display: block
          +bold
          color: $blue
          font-size: 15px
          line-height: 18px
        .order-date
          display: block
          font-size: 15px
          line-height: 18px
          color: $mobileBlack
        .open-close
          color: $mobileBlack
          position: absolute
          right: 0
          top: 0
          +flex(center, center)
          width: 40px
          height: 32px
          font-size: 22px
          line-height: 22px
          &:after
            content: '+'
            position: relative
            top: 0
        &.open
          .open-close
            &:after
              content: ''
              border: 1px solid $mobileBlack
              width: 9px
              top: 1px

      .order-block
        display: none
        margin-top: 20px

        hr
          border: none
          border-top: 1px solid $borderColor
          margin: 10px 0

        .order-header
          padding: 0 16px

          .order-title
            color: $dark-grey
            font-size: 15px
            line-height: 18px
            +semibold
            margin: 0

          p
            margin: 0
            +regular
            font-size: 15px
            line-height: 22px
            &.inline-link
              a
                color: $blue
                text-decoration: none
        .replace-order
          padding: 0 16px
        .btn-holder
          background-color: $blue
          border-radius: 8px
          height: 50px
          width: 100%
          margin: 20px auto
          a
            +flex(center, center)
            height: 100%
            text-decoration: none
            +regular
            font-size: 15px
            line-height: 15px
            color: white
            position: relative

            &:before
              content: '›'
              +semibold
              color: white
              font-size: 40px
              line-height: 40px
              position: absolute
              right: 25px
              top: 0px

            span
              color: white
              text-decoration: none
              +regular
              font-size: 19px
              line-height: 19px

  .account-order-history
    margin-top: 0

    .checkout-product-list
      border-bottom: 0
      margin-bottom: 20px

      .checkout-product-list-item
        background-color: transparent
        border-top: none
        h3
          width: calc(100% - 60px)
          margin-bottom: 4px
        .quantity-price
          .quantity
            color: $blue
            span:after
              content: ':'
          .price
            +regular
    .summary
      margin-top: 5px
      background-color: transparent
      border-top: none

      .summary-row
        border-bottom: none
        padding: 3px 16px
        .title
          +regular
        .price
          top: 0
          +regular
        &.total
          .title, .price
            +bold
            color: $dark-grey