@import "../App/App"

.Minimized
  height: 3rem

.Expanded
  min-height: 3rem

  &__Links
    position: relative
    width: 100%

.Header
  color: var(--main-color)
  background-color: var(--nav-bg-color)
  display: flex
  justify-content: space-between
  align-items: flex-start
  flex-wrap: wrap

  &__Links, &__User
    min-height: 3rem
    display: flex
    flex-wrap: wrap

  &_Button
    font-size: 1rem
    padding: .5rem
    color: var(--main-color)
    background-color: var(--nav-bg-color)
    border: none
    display: flex
    justify-content: center
    align-items: center
    cursor: pointer

    &:hover
      background-color: var(--main-bg-color)

  &__User
    justify-content: flex-end

    &_Profile
      display: flex
      align-items: center
      font-size: 1rem
      height: 3rem
      color: var(--main-color)
      background-color: var(--nav-bg-color)
      border: none
      border-radius: 0
      padding: 0 .5rem

      &:hover
        background-color: var(--main-bg-color)

    &_Avatar
      background-size: cover
      background-position: center
      width: 40px
      height: 40px
      border-radius: 50%
      margin-right: .2rem