@import '../../base/variables';
@import '../../base/mixins';

.onyx_compatibility_page {
  * {
    position: relative;
  }

  #comparation_table {
    display: none;

    &.active {
      display: block;
      margin: 1rem 0;
    }

    thead {
      background-color: $color-grayLight;
      color: $blue;

      th {
        &:nth-child(2) {
          background-color: $color-grayLight;
          color: $blue;
        }
      }
    }
  }

  #onyx_compatibility_table_json {
    display: none;
  }

  .table-compare-control {
    display: flex;
    justify-content: end;

    .flex-box {
      display: flex;
      align-items: center;
      gap: 10px;
    }
  }

  .dataTables_wrapper {
    overflow: scroll;
  }

  .onyx_compatibility_text {
    max-width: 480px;
    margin: 110px auto 50px;
    text-align: center;
  }

  .onyx_compatibility_page__products {
    .onyx_compatibility_content {
      margin: 30px auto;
      display: grid;
      text-align: center;
      grid-template-columns: 1fr 1fr;
      display: none;

      h4 {
        margin-bottom: 25px;
      }

      .onyx_cards {
        display: flex;
        gap: 15px;
        flex-wrap: wrap;
        justify-content: center;

        .onyx_card {
          cursor: pointer;
          width: 250px;
          height: 110px;

          img {
            width: auto;
            max-height: 100%;
          }

          @media (max-width: 768px) {
            width: 150px;
          }
        }
      }
    }
  }

  .inner-box {
    padding-bottom: 2rem;
  }

  .dataTables_wrapper .dataTables_paginate .paginate_button {
    padding: .3rem .7rem;

    &.current {
      background: unset;
      border-color: $blue;
      border-width: 2px;
    }
  }

  .onyx_card.selected {
    border: 3px solid $blue;
    box-shadow: 0px 3px 30px #00000066;
  }

  // Product filter
  .onyx_compatibility_page__products_filter {
    display: none;

    p {
      margin-bottom: 5px;
      text-align: right;
    }

    ul {
      display: flex;
      list-style-type: none;
      flex-wrap: wrap;
      justify-content: end;

      li {
        color: #ED4237;
        margin-right: 15px;
        cursor: pointer;

        &:before {
          content: 'x ';
          cursor: pointer;
        }
      }

      @media (max-width: 768px) {
        justify-content: center;

        li {
          margin-bottom: 10px;
        }
      }
    }
  }

  .grid-box.products {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;

    > a,
    > span {
      padding: 5px;
      border: 1px solid $blue;
    }
  }
}