@import '../../common/_util'

.container
  height: 100vh
  background: $black
  color: $white
  display: flex
  justify-content: flex-start
  flex-direction: column

.profileImg
  height: auto
  border-radius: 50%
  border: 2px solid $gray

.profileCover
  display: flex
  align-items: center
  justify-content: center
  padding: 16px 0

.profileName
  display: flex
  align-items: center
  justify-content: center

.type
  display: flex
  align-items: center
  justify-content: center
  text-transform: uppercase
  font-weight: 900

.separator
  height: 2px
  background: $dark_gray
  border-radius: 4px
  width: 80%
  margin: 16px auto

.menuCover
  display: flex
  align-items: center
  justify-content: center
  flex-direction: column
  position: relative

.topArrow
  content: ''
  position: absolute
  right: -1px
  height: 0
  width: 0
  border: 30px solid transparent
  border-right: 10px solid $white
  pointer-events: none
  transition: top 0.2s ease-in-out
  transform-origin: top right

.backgroundSelection
  content: ''
  position: absolute
  right: 0
  height: $menuHeight + px
  width: 100%
  background: $royalGold
  pointer-events: none
  transition: top 0.2s ease-in-out
  transform-origin: top right

.menuItem
  text-transform: uppercase
  cursor: pointer
  width: 100%
  height: $menuHeight + px
  display: flex
  align-items: center
  justify-content: flex-start
  padding: 0 20px
  color: $white
  pointer-events: auto
  position: relative
  z-index: 1
  font-weight: 400
  gap: 8px
  > svg
    flex: none
.active
  color: $black
  font-weight: 600

.bottomContainer
  display: flex
  align-items: center
  justify-content: flex-end
  flex-direction: column
  flex-grow: 1
  padding: 16px 0

.zoomCtr
  text-transform: uppercase
  display: flex
  align-items: center
  justify-content: center
  gap: 8px
  color: $white
  > svg
    cursor: pointer

.logoutText
  font-weight: 600px
  text-transform: uppercase

.zoomOutText
  font-weight: 600px
  text-transform: uppercase
  cursor: pointer

.logoutCtr
  color: $white
  cursor: pointer
