// Mixin for icons.
@mixin icon-bg($url, $position, $size)
  background-repeat: no-repeat
  background-position: $position
  background-size: auto $size
  background-image: url($url)

// Overwrite default jQuery.contextMenu style.
.lab-responsive-content
  .context-menu-list
    min-width: 5em
    max-width: 50em
    font-size: 0.9em
    font-family: inherit
    border: none

    .context-menu-list
      // Submenu
      font-size: 1.0em

  .context-menu-submenu:after
    // Original jQuery.contextMenu CSS isn't prepared for responsive layout.
    top: 0.35em

  // ### Language selection menu
  .lang-menu
    // Top-level menu
    min-width: 1em
    background: #fefefe
    border-radius: 0.25em
    font-size: 1em

    .context-menu-item
      padding: 0.1em 2em 0.25em 0.25em
      background-size: 1.8em
      background-repeat: no-repeat
      background-position: top 0.1em right 0.01em
      border-radius: 0.25em
      background-color: transparent
      text-align: right
      &:hover
        background-color: #ebebeb
      & > span
        font-size: 0.85em

  // It isn't a part of language menu itself, but it's an icon which is used as a trigger element
  // for it (and it's a part of language-select.js module).
  .lang-icon
    background-size: 100%
    background-position: 0 0
    background-repeat: no-repeat
    cursor: pointer

  // ### Mutations menu (visible during DNA animation)
  .mutations-menu
    // Top-level menu
    min-width: 3em
    border-radius: 0.7em

    .context-menu-list
      // Submenu
      min-width: 6em
      border-radius: 0.7em

    .context-menu-item
      border-radius: 0.7em
      padding: 0.35em 1em

    .substitution-submenu
      .context-menu-item
        // Note that as labels are empty (only background is displayed), padding
        // and min-width is used to define size of this submenu items.
        padding: 1.2em

      .A-to-A
        display: none
      .A-to-T
        @include icon-bg("#{$directory}resources/dna/A-to-T.svg", 50%, 75%)
      .A-to-G
        @include icon-bg("#{$directory}resources/dna/A-to-G.svg", 50%, 75%)
      .A-to-C
        @include icon-bg("#{$directory}resources/dna/A-to-C.svg", 50%, 75%)

      .C-to-C
        display: none
      .C-to-T
        @include icon-bg("#{$directory}resources/dna/C-to-T.svg", 50%, 75%)
      .C-to-G
        @include icon-bg("#{$directory}resources/dna/C-to-G.svg", 50%, 75%)
      .C-to-A
        @include icon-bg("#{$directory}resources/dna/C-to-A.svg", 50%, 75%)

      .G-to-G
        display: none
      .G-to-T
        @include icon-bg("#{$directory}resources/dna/G-to-T.svg", 50%, 75%)
      .G-to-C
        @include icon-bg("#{$directory}resources/dna/G-to-C.svg", 50%, 75%)
      .G-to-A
        @include icon-bg("#{$directory}resources/dna/G-to-A.svg", 50%, 75%)

      .T-to-T
        display: none
      .T-to-G
        @include icon-bg("#{$directory}resources/dna/T-to-G.svg", 50%, 75%)
      .T-to-C
        @include icon-bg("#{$directory}resources/dna/T-to-C.svg", 50%, 75%)
      .T-to-A
        @include icon-bg("#{$directory}resources/dna/T-to-A.svg", 50%, 75%)

    .insertion-submenu
      .context-menu-item
        padding: 0.6em 2.5em 0.6em 0.8em
      .A
        @include icon-bg("#{$directory}resources/dna/A.svg", right 0.5em top 50%, 85%)
      .T
        @include icon-bg("#{$directory}resources/dna/T.svg", right 0.5em top 50%, 85%)
      .G
        @include icon-bg("#{$directory}resources/dna/G.svg", right 0.5em top 50%, 85%)
      .C
        @include icon-bg("#{$directory}resources/dna/C.svg", right 0.5em top 50%, 85%)

  // ### Amino-acids menu (used to change type of the amino acid)
  .aminoacids-menu
    min-width: 9em
    // Each option in context menu (one row).
    .context-menu-item
      padding: 0 0 0 19%

    .context-menu-item:hover
      font-weight: bold

    // Style of options:
    .pos-charge
      @include icon-bg("#{$directory}resources/plus.svg", 0.25em 50%, 1.0em)
    .neg-charge
      @include icon-bg("#{$directory}resources/minus.svg", 0.25em 50%, 1.05em)

    .hydrophobic
      background-color: #f3c35d
    .hydrophobic.marked
      background-color: #ffe64b

    .hydrophilic
      background-color: #9dc278
    .hydrophilic.marked
      background-color: #bee299

    .hydrophobic-category
      font-size: 1.1em
      font-weight: bold
      padding: 2% 0 2% 14%
      background-color: #E0A21B
      @include icon-bg("#{$directory}resources/col.svg", 4%, 40%)

    .hydrophilic-category
      font-size: 1.1em
      font-weight: bold
      padding: 2% 0 2% 14%
      background-color: #75a643
      @include icon-bg("#{$directory}resources/col.svg", 4%, 40%)

    // Expanded category style.
    .expanded
      @include icon-bg("#{$directory}resources/exp.svg", 4%, 40%)

