.page--problem_edit
  .widget--category-filter
    &__category
      margin-bottom: rem(6px)

      &-tag
        display: inline-block
        padding: rem(5px 6px)

        &:hover
          color: #FFF
          background: $primary-color
          text-decoration: none

        &.selected
          color: #FFF
          background: $secondary-color

    &__drop
      position: relative
      font-size: rem($font-size-small)
      width: rem(170px)
      padding: rem(10px)
      margin-right: rem(10px)
      background: $menu-drop-bg-color
      box-shadow: $menu-drop-shadow

      &:before
        content: ''
        display: block
        position: absolute
        width: 0
        height: 0
        border: rem($menu-drop-triangle-size) solid transparent
        border-top-color: #FFF
        border-left-color: #FFF
        box-shadow: $menu-drop-triangle-shadow
        transform: rotate(135deg)
        transform-origin: 0 0
        pointer-events: none
        left: 100%
        top: 50%
        margin-left: rem(floor($menu-drop-triangle-size * 1.414))

    &__subcategory
      margin: rem(2px)
      display: inline-block

      &-tag
        display: inline-block
        padding: rem(5px 6px)

        &:hover
          color: #FFF
          background: $primary-color
          text-decoration: none

        &.selected
          color: #FFF
          background: $secondary-color

  .drop-target-attached-right .widget--category-filter__drop
    margin-right: 0
    margin-left: rem(10px)

    &:before
      transform-origin: 100% 0
      transform: rotate(-45deg)
      left: auto
      right: 100%
      margin-left: 0
      margin-right: 0
      margin-top: rem(floor($menu-drop-triangle-size * -1.414))