@import "../css/colors"
@import "../css/vars"


:local(.menuitem)
  position: relative;
  font-family: $sansserif
  font-size: 16px
  color: $textGray
  line-height: 28px
  position: relative
  min-height: 22px
  padding: 5px 10px 5px 10px
  //margin-bottom: -10px
  background-color: $white

  [class^="doka-icon-mradioinactive"], [class^="doka-icon-mradioactive"]
    position: relative;
    top: 2px
    visibility: hidden

  a
    text-decoration: none
    color: inherit

:local(.menuitem.hasChildren)
  margin-bottom: 0

:local(.menuitem.clickable)
  cursor: pointer

  &:hover
    background-color: $darkGray
    color: $white

    :local(.label)
      color: $white

    :local(.rightIcon)
      color: $white

:local(.menuitem.selected)
  cursor: default;
  font-weight: 600;

  &:hover
    background-color: $white
    color: $textGray

  [class^="doka-icon-mradioinactive"], [class^="doka-icon-mradioactive"]
    visibility: visible;
    color: $blue

:local(.menuitem.disabled)
  cursor: default
  color: $middleGray

  &:hover
    background-color: $white
    color: $middleGray !important

:local(.menu.secondary .menuitem)
  //font-style: italic;
  padding-left: 0

  &:hover
    background-color: $white
    color: $textGray

  i
    visibility: visible;

:local(.menuitem.back)
  margin-top: -10px
  margin-bottom: 10px

  i
    margin-top: 1px
    font-size: 16px
    color: $textGray

:local(.text)
  display: inline-block;
  width: 90%

:local(.label)
  display: block
  font-size: 12px
  font-family: $sansserif
  color: $textGray
  margin-bottom: 2px
  user-select: none
  word-wrap: break-word;

:local(.rightIcon)
  color: $blue
  position: absolute
  right: 5px
  top: 6px