@import ../../theme/ui-rules.sass

ion-modal.user-full-menu 
  
  ion-header
    ion-toolbar
  ion-content
    div.store 
      padding: 0 4 * $grid !important
      margin:  4 * $grid
      height: 40px
      margin-left: 0px !important
      padding-left: 32px !important
      /* Bold/L10 */

      font-family: Open Sans
      font-style: normal
      font-weight: bold
      font-size: 16px !important
      line-height: 16px
      /* identical to box height, or 100% */
  
      letter-spacing: -0.05em
  
      /* Black/100% */
  
      display: flex !important
      align-items: center !important
      justify-content: center !important
      color: #000000 !important
      width: fit-content
      svg
        margin-right: 8px
      /* Arcus/Green */
  
      background: #F0F0F0
      border-radius: 34px
      border-top-left-radius: 0px
      border-bottom-left-radius: 0px
    >div
      &:nth-child(1)
        margin: 12px 10px 10px 32px
        img
          height: 100px
          width: 100px
          background-repeat: no-repeat
          background-position: 50%
          border-radius: 50%
          background-size: 100% auto
      &.name //full_name
        padding: 0px 32px 5px
        font-size: 28px
        font-weight: bold
        line-height: 28px
        letter-spacing: -0.05em
      &.email //email
        margin: 0 32px 0 32px
        font-weight: 600
        font-size: 16px
        line-height: 16px
        letter-spacing: -1.2px
        color: rgba(0, 0, 0, 0.6)
        letter-spacing: -0.05em
      >img.edit-icon
        width: 32px
        height: 32px
        margin: 0px 110px 70px -20px
    ul
      list-style: none
      margin: 0px
      padding: 16px
      padding-top: 24px
      li
        display: flex
        width: 100%
        align-items: center
        height: 72px
        color: var(--ion-color-primary-shade)
        &.disabled 
          opacity: 0.3 !important
          filter: grayscale(100%)
        > div
          &:nth-child(1)
            width: 70%
            font-size: 18px
            font-weight: bold
          &:nth-child(2)
            width: 30%
            display: flex
            align-items: center
            justify-content: center
            ion-icon
              height: 27px
              width: 27px
              padding: 10px
              box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.15)
              border-radius: 50%
            ion-badge
              height: 48px
              width: 48px
              border-radius: 50%
              background-color: var(--ion-color-light-shade)
              display: flex
              align-items: center
              justify-content: center
              font-size: 24px
              color: var(--ion-primary-color)
        &.divider
          height: auto
          > h1
            color: var(--ion-text-color)
            margin: 0px
            font-size: inherit
            border-left: 4px solid var(--ion-color-light-tint)
            padding: 4px 8px
            border-bottom: 1px solid var(--ion-color-light-tint)
            width: 89%
            font-weight: bold
            margin-top: 12px
  ion-footer
    text-align: center
    img
      margin: 5px 75px 50px 75px
      display:block
    ion-button
      width: 240px
      height:48px
      margin: 10px auto
      border-radius: 84px
      border: solid 2px #000000
      font-size: 16px
      font-weight: 700
      letter-spacing: -0.5px
      text-align: center
      color: #000000
    div.version
      font-size: 0.9em
      opacity: 0.4
      text-align: center
      color: #333
      padding-bottom: 20px