@import "../../Shared/variables.scss";

.statistics-table {
  position: relative;

  &__wrapper {
    overflow: hidden;
    overflow-x: auto;
    border-radius: 6px;
    border: 1px solid #d5d5d5;
  }

  &__location {
    position: absolute;
    top: 30%;
    left: 1%;
    border-radius: 8px;
    z-index: 15;

    li {
      background-color: #fff;

      button {
        width: 100%;
        padding: 14px;
        color: #101828;
        font-size: 14px;
        font-weight: 400;
      }
    }

    li:hover {
      background-color: #f1f1f1;
    }

    #statistics-table__location_active {
      background-color: #f1f1f1;
    }
  }

  table {
    width: 100%;
    border-collapse: collapse;

    thead {
      height: 76px;

      tr {
        background-color: #f4f4f4;

        th {
          border-style: none;
          padding: 0 20px;

          color: $gray-500;
          font-size: 14px;
          font-weight: 500;
          text-align: start;
          cursor: pointer;

          .statistics-table__header {
            display: flex;
            align-items: center;
            gap: 2px;

            div {
              display: flex;
              align-items: center;
            }
          }
        }

        th:first-child {
          padding-left: 20px;
        }
      }
    }

    tbody {
      tr {
        height: 76px;
        border-bottom: 1px solid #f1f4f9;

        td {
          padding: 0 20px;
          color: $gray-500;
          font-size: 20px;
          font-weight: 500;
          width: 100px;
        }

        td:first-child {
          padding-left: 20px;
          color: black;
        }
      }

      tr:last-child {
        border: none;
      }
    }
  }
}
