openfoodfoundation/openfoodnetwork

tbody.panel-ctrl {
  td.panel-toggle {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;

    position: relative;

    i.icon-chevron::before {
      font-size: 1.2rem;
      content: "\f078";
      padding: 0;
    }

    &.error::before {
      font-family: FontAwesome;
      font-weight: normal;
      font-style: normal;
      display: inline-block;
      text-decoration: inherit;
      position: absolute;
      top: 5px;
      right: 5px;
      font-size: 2rem;
      -webkit-font-smoothing: antialiased;
      content: "\f071";
      color: $color-warning;
    }

    &.status {
      i.icon-status::before {
        font-size: 1.5rem;
        opacity: 0.5;
      }

      i.issue::before {
        content: "\f071";
        color: $color-warning;
      }

      i.warning::before {
        content: "\f071";
        color: #ff9848;
      }

      i.ok::before {
        content: "\f058";
        color: $spree-green;
      }
    }

    &:hover {
      cursor: pointer;
      background-color: #d0e2f6;
      * {
        color: #1b3c56;
      }

      i.icon-status::before {
        opacity: 1;
      }
    }
  }

  &.expanded {
    > tr:not(.panel-row) {
      > td {
        border-bottom: 1px solid #6788a2;

        &.selected {
          background-color: #ffffff;
          border-left: 1px solid #6788a2;
          border-right: 1px solid #6788a2;
          border-top: 1px solid #6788a2;
          border-bottom: none;

          &:hover {
            background-color: #ffffff;
          }

          * {
            color: #1b3c56;
          }

          i.icon-status::before {
            opacity: 1;
          }

          i.icon-chevron::before {
            content: "\f077";
          }
        }
      }
    }
  }

  tr.panel-row {
    &:hover {
      > td {
        background-color: #ffffff;
      }
    }

    > td {
      border-color: #6788a2;
      padding: 0;
      .panel {
        .actions {
          .button {
            display: inline-block;
          }
        }

        .row {
          margin: 0px -4px;

          padding: 20px 0px;

          .column.alpha,
          .columns.alpha {
            padding-left: 20px;
          }

          .column.omega,
          .columns.omega {
            padding-right: 20px;
          }
        }
      }
    }
  }
}