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

.LiquidityOrders__Container {
  max-width: 65.75rem;
}

.LiquidityOrders__Header {
  &:extend(.caps--large);

  color: white;
  margin: 1rem 0;
  padding: 2rem 0.6rem 0;
}

.LiquidityOrders__TableHeader {
  &:extend(.caps--small);

  color: @color-lightgray;
  display: table-header-group;

  &:first-child > li {
    padding-top: 0;
  }

  > li {
    display: table-cell;
    min-width: 9.5rem;
    padding: 2rem 0 0.625rem;
    text-align: left;
    width: 12.5rem;

    &:first-child {
      min-width: 4.25rem;
      padding-left: 1.5rem;
      padding-right: 0.5rem;
      width: 6rem;
    }

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

    &:last-child {
      min-width: 9.38rem;
      text-align: center;
      width: 9.38rem;
    }
  }
}

.LiquidityOrders__TableWrapper {
  display: table;
  margin-bottom: 2rem;
  width: 100%;
}

.LiquidityOrders__NullState {
  color: @color-lightgray;
  margin-bottom: 2rem;
}

@media @breakpoint-mobile {
  .LiquidityOrders__Header {
    padding-top: 0;
  }

  .LiquidityOrders__TableHeader {
    > li {
      display: table-cell;
      min-width: 7.5rem;
      padding: 1rem 0 0.625rem;

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

      &:last-child {
        min-width: 7.5rem;
        padding-right: 0.5rem;
      }
    }
  }
}

@media @breakpoint-mobile-medium {
  .LiquidityOrders__TableHeader {
    > li {
      min-width: unset;
      padding: 1rem 0 0.625rem;
      text-align: center;
      width: unset;

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

      &:last-child {
        width: unset;
      }
    }
  }
}
