AugurProject/augur-ui

@import (reference) '~assets/styles/shared';

.MarketLiquidityTable__table-body {
  background-color: @color-input-background;
  display: table-row-group;
  font-size: @font-size-large;
  line-height: @font-size-large;
}

.MarketLiquidityTable__Order {
  background-color: white;
  color: black;
  display: table-row;
  transition: background-color 0.15s ease;

  > li {
    border-top: 1px solid @color-lightest-gray;
    display: table-cell;
    min-width: 9.5rem;
    overflow: hidden;
    padding: 0.625rem 0.2rem 0.625rem 0;
    text-align: left;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 12.5rem;

    > span {
      font-size: @font-size-medium;
    }

    &:first-child {
      font-weight: 500;
      min-width: 4.25rem;
      padding-left: 1rem;
      padding-right: 0.5rem;
      text-transform: capitalize;
      width: 6rem;

      > .Order__pending {
        justify-content: flex-start;
      }
    }

    &:nth-child(2) {
      min-width: 4.375rem;
      width: auto;
    }

    &:last-of-type {
      min-width: 9.38rem;
      text-align: center;
      width: 9.38rem;

      > button {
        &:extend(.button--transparent all);

        font-size: @font-size-medium;
        margin: auto;
      }
    }
  }

  &:hover {
    > li {
      background-color: @color-selection-modal-background;
    }
  }
}

.MarketLiquidityTable__OrderIndicator {
  background-color: @color-positive;
  bottom: 0;
  left: 0;
  position: absolute;
  top: 0;
  width: 0.5rem;
}

.MarketLiquidityTable__OrderIndicator_negative {
  background-color: @color-negative;
}

.MarketLiquidityTable__firstColumn {
  padding-left: 0.5rem;
}

@media @breakpoint-mobile {
  .MarketLiquidityTable__table-body {
    background-color: @color-input-background;
    display: table-row-group;
    font-size: @font-size-small;
    line-height: @font-size-small;
  }

  .MarketLiquidityTable__OrderIndicator {
    width: 0.35rem;
  }

  .MarketLiquidityTable__firstColumn {
    padding-left: 0.25rem;
  }

  .MarketLiquidityTable__Order {
    > li {
      color: inherit;
      min-width: 7.5rem;

      &:first-child {
        padding-left: 0.5rem;
      }

      &:last-of-type {
        min-width: 7.5rem;
        padding-right: 0;
      }
    }
  }
}

@media @breakpoint-mobile-medium {
  .MarketLiquidityTable__Order {
    > li {
      font-size: @font-size-medium;
      line-height: @font-size-medium;
      min-width: unset;
      width: unset;

      &:first-child,
      &:nth-child(2),
      &:last-child {
        min-width: unset;
        width: unset;
      }
    }
  }
}