//= require material_icons

@import "materialize"

body
  background: white

.no-events
  pointer-events: none

.ellipses
  overflow: hidden
  text-overflow: ellipsis
  white-space: nowrap

.nav-wrapper
  display: flex
  justify-content: space-between
  padding: 0 5%

.nav-left, .nav-right
  display: flex
  align-items: center

.nav-button
  cursor: pointer
  &:hover
    opacity: 0.8

.notifications-btn
  color: #7ed321
  .inactive
    display: none
  &.is-disabled
    color: #9e9e9e
    .active
      display: none
    .inactive
      display: block

.humanoids
  height: 50px
  display: flex
  > div
    width: 50px

.online-switch
  padding: 0 10px
  margin-right: 10px

.baskets-list
  display: flex
  flex-wrap: wrap
  justify-content: space-between
  align-items: stretch

.basket
  display: flex
  width: 240px
  .card-image
    width: 100%
    height: 120px
    background: #f5f5f5
  .card-content
    height: 120px
    overflow: hidden
    text-overflow: ellipsis

.product-content
  display: flex
  align-items: center
  .secondary-content
    margin-left: auto
  .delete-product-link
    opacity: 0.1
  &:hover, &:active
    .delete-product-link
      opacity: 0.7
      i
        color: #b71c1c

.delete-product-link
  margin-left: 10px
  margin-top: 4px
  transition: opacity 200ms
  i
    transition: color 200ms