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

.rating-section {
  padding: 0 90px;
  margin-top: 110px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 30px;

  &__table {
    width: 100%;
    padding: 15px;
    background-color: #fff;
    border: 1px solid $gray-300;
    overflow: hidden;
    overflow-x: auto;

    table {
      width: 100%;
      border-collapse: collapse;
      border-radius: 6px;
      thead {
        tr {
          border-bottom: 1px solid #ddd;
          th {
            padding: 15px 0;
            text-align: left;
            color: $gray-500;
            font-size: 16px;
            font-weight: 500;
            gap: 4px;
          }

          #report-header-date,
          #report-header-comment,
          #report-header-like {
            cursor: pointer;

            div {
              display: flex;
              align-items: center;
              gap: 4px;
            }
          }
        }
      }

      tbody {
        tr {
          border-bottom: 1px solid #ddd;

          td {
            padding: 15px 0;
          }

          #report-date {
            min-width: 150px;
            color: $gray-500;
            font-weight: 500;
            font-size: 16px;
          }

          #report-location {
            min-width: 200px;
            overflow: hidden;

            a {
              text-decoration: underline;
              white-space: preserve nowrap;
              color: $light-blue;
              font-size: 16px;
              font-weight: 500;
            }
          }

          #report-type {
            min-width: 210px;
          }

          #report-description {
            min-width: 378px;

            p {
              width: 318px;
              color: #32303a;
              font-size: 18px;
              font-weight: 500;
              line-height: 20px;
              letter-spacing: 0.1px;
              text-align: justify;
            }
          }

          #report-comment,
          #report-like {
            div {
              display: flex;
              align-items: center;
              gap: 7px;
            }
          }
        }

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

@media screen and (max-width: 1024px) {
  .rating-section {
    padding: 0 30px;
  }
}

@media screen and (max-width: 768px) {
  .rating-section {
    margin-top: 80px;
  }
}

@media screen and (max-width: 550px) {
  .rating-section {
    padding: 0 16px;

    margin-top: 70px;
  }
}
