@import '../../styles/common.module.scss';
@import '../../styles/variables.scss';

.container {
  max-width: 1200px;
  margin: 0 auto;
}

.listItem {
  @include paper;

  display: flex;
  align-items: center;
  border-bottom: 1px solid #ddd;
  margin-bottom: 3px;
  transition: 0.3s;
}

.listItem:hover {
  background-color: #eee;
}

.list {
  @include styledScrollBarList;
  // box-shadow: 0 3px 7px 0 rgba(0, 0, 0, 0.1), 0 0px 24px 0 rgba(0, 0, 0, 0.1);
  // border: 1px solid #ddd;
  border-radius: 10px;
  padding-right: 10px;
  padding-top: 15px;
}

.listContent {
  padding-bottom: 70px;
}

.itemMain {
  display: flex;
}

.itemImage {
  @include bckgrCover;
  height: 60px;
  width: 80px;
  min-width: 80px;
}

.itemMainInfo {
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin-left: 10px;
  width: 100%;
  min-width: 10px;
  padding-right: 10px;
}

.itemTitle {
  margin-bottom: 4px;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ellipsis {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.listItemActions {
  display: flex;
  justify-content: flex-end;
}

.priceBlock {
  display: flex;
  flex-wrap: wrap;
  font-size: 18px;
}

.price {
  font-weight: 500;
  font-size: 0.85rem;
}

.oldPrice {
  text-decoration: line-through;
  opacity: 0.7;
  margin-right: 10px;
  font-size: 0.85rem;
}

.filter {
  display: flex;
  align-items: center;
  // padding: 10px 15px;
  flex-wrap: wrap;
}

.pageActions {
  display: flex;
  align-items: center;
  margin-right: 10px;
}

div.filterDrawer {
  @include paperElevated;
  @include styledScrollBar;
  width: 280px;
  padding-right: 7px;
}

.filterHeader {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-left: 15px;

  > h3 {
    font-weight: 500;
  }
}

:global(.modeDark) {
  .listItem {
    background-color: #333;
    border-bottom: 1px solid #333;

    * {
      color: #eee;
    }
  }

  .attributeFilterButton {
    color: #eee;

    * {
      color: #eee;
    }
  }

  .listItem:hover {
    background-color: #555;
  }

  div.filterDrawer {
    background-color: #333;

    * {
      color: #eee;
    }

    :global(.MuiSlider-thumb.MuiSlider-thumbColorPrimary) {
      > span > span {
        background-color: #555;
        color: #fff;
      }
    }
  }

  .listHeader {
    background: #333;

    * {
      color: #fff;
    }
  }
}

@media screen and (max-width: $mobileBreakpoint) {
  // mobile
  div.filterDrawer {
    padding-top: 60px;
  }
}
