@import "{ohif:design}/app"

table.ruleTable
  thead
    tr
      th
        theme('color', '$defaultColor')
        text-align: center

      th:first-child
        text-align: left

  tbody
    tr
      td
        theme('color', '$defaultColor')
        text-align: center

        .failWarning
          color: red

        .editRule
        .deleteRule
          &:hover, &:active
            cursor: pointer
            transition(all 0.1s ease)
            
            &:hover
              theme('color', '$hoverColor')
              
            &:active  
              theme('color', '$activeColor')

      td:first-child
        text-align: left
        overflow-wrap: break-word
        word-wrap: break-word
        -ms-word-break: break-word
        word-break: break-word
        -ms-hyphens: auto
        -moz-hyphens: auto
        -webkit-hyphens: auto
        hyphens: auto

.addRuleContainer
  margin: 10px 0
  text-align: center
  theme('color', '$defaultColor')

  .addRule
    cursor: pointer
    transition(all 0.1s ease)
    
    &:hover
      theme('color', '$hoverColor')
      
    &:active  
      theme('color', '$activeColor')