@import "theme-mixin";

@border-width: 1px;

.themeMixin({
  :host {
    .table-col {
      &:not(:first-child) {
        .table-row {
          border-left: none;
        }
      }

      .table-row {
        box-sizing: border-box;
        border: @table-border-color @border-width solid;
        border-bottom: none;
        border-top: none;

        &.hovered {
          background-color: fade(@primary-color, 15%);
        }

        .table-cell {
          &.trade-item {
            &.ask-side-item {
              background-color: fade(@sell-color, 15%);

              &.best-row {
                background-color: fade(@sell-color, 50%)
              }
            }

            &.bid-side-item {
              background-color: fade(@buy-color-background-light, 15%);

              &.best-row {
                background-color: fade(@buy-color-background-light, 50%);
              }
            }

            &.mixed-item {
              background-color: fade(@mix-color, 50%);
            }
          }

          &.spread-item {
            background-color: fade(@disabled-color, 7%);
          }

          &.current-position-range-item {
            border-right: (@border-width * 3) solid @border-color-base;

            &.positive {
              border-right-color: @buy-color;
            }

            &.negative {
              border-right-color: @sell-color;
            }
          }

          .grid-line {
            border-color: @table-border-color;
          }
        }
      }
    }

    #price-panel {
      .table-cell {
        .highlighter {
          border-top:  @border-width solid red;
          border-bottom:  @border-width solid red;
        }

        :not(.fw-bold) {
          color: fade(@text-max-contrast-color, 80%);
        }
      }
    }

    #orders-panel {
      .table-cell {
        width: 100%;
        height: 100%;

        .orders-indicator {
          &.bid {
            color: @buy-color-accent;
          }

          &.ask {
            color: @sell-color-accent;
          }

          &.dirty {
            color: @disabled-color;
          }

          &.limit-order {
            color: @text-max-contrast-color;

            &.bid {
              background-color: fade(@buy-color, 60%);
            }

            &.ask {
              background-color: fade(@sell-color, 60%);
            }

            &.dirty {
              background-color: @disabled-color;
            }
          }

          &.multiple::after {
            content: "*";
          }


          &:hover {
            text-decoration: line-through;
          }
        }
      }
    }
  }
});

#table-body-container {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;

  .table-cell {
    position: relative;
    height: 100%;
    width: 100%;

    .grid-line {
      display: inline-block;
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 50%;
      border-bottom-style: solid;

      &.minor {
        @minor-border-width: @border-width;
        border-bottom-width: @minor-border-width;
        height: calc(50% + @minor-border-width);
      }

      &.major {
        @major-border-width: @border-width * 2;
        border-bottom-width: @major-border-width;
        height: calc(50% + @major-border-width);
      }
    }
  }


  #volume-panel {
    flex-grow: 1;
    .table-cell {
      .highlighter {
        display: inline-block;
        position: absolute;
        left: 0;
        top: 0;
        width: 0;
      }

      .volume {
        position: relative;
        white-space: nowrap;

        .growing-volume {
          position: absolute;
          top: 0;
          bottom: 0;
          right: 100%;
          padding-right: 5px;
          display: flex;
          align-items: center;
        }
      }
    }
  }

  #price-panel {
    .table-cell {
      text-align: right;

      .highlighter {
        display: inline-block;
        position: absolute;
        left: 0;
        top: (-1 * @border-width);
        width: 100%;
        height: calc(100% + @border-width);
      }
    }
  }

  #orders-panel {
    min-width: 20px;
    .table-row {
      .table-cell {
        .orders-indicator {
          cursor: pointer;
        }

        &:not(.best-row) {
          background-color: transparent;
        }
      }
    }
  }
}

