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

.volunteers-table {
  overflow: hidden;
  overflow-x: auto;
  border-radius: 6px;
  border: 1px solid var(--Grey-for-stroke, #d5d5d5);
  table {
    width: 100%;
    border-collapse: collapse;

    thead {
      height: 76px;

      tr {
        background-color: #f4f4f4;

        th {
          border-style: none;

          color: $gray-500;
          font-size: 16px;
          font-weight: 500;
          text-align: start;

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

        th:first-child {
          padding-left: 20px;
          min-width: 113px;
        }
        th:nth-child(2) {
          min-width: 206px;
        }
        th:nth-child(3) {
          cursor: pointer;
          min-width: 190px;
        }
        th:nth-child(4) {
          cursor: pointer;
          min-width: 213px;
        }
        th:nth-child(5) {
          cursor: pointer;
          min-width: 222px;
        }
        th:last-child {
          cursor: pointer;
          min-width: 92px;
        }
      }
    }

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

        td {
          color: $gray-500;
          font-size: 20px;
          font-weight: 500;
        }

        td:first-child {
          padding-left: 20px;
          min-width: 113px;
          border-top-left-radius: 6px;
        }
        td:nth-child(2) {
          min-width: 206px;

          a {
            color: $light-blue;
            text-decoration: underline;
          }
        }
        td:nth-child(3) {
          min-width: 190px;
        }
        td:nth-child(4) {
          min-width: 213;
        }
        td:nth-child(5) {
          min-width: 222px;
        }
        td:last-child {
          min-width: 92px;
          border-top-right-radius: 6px;
        }
      }

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

@media screen and (max-width: 550px) {
  .volunteers-table {
    table {
      tbody {
        tr {
          td:first-child {
            padding-left: 20px;
            min-width: 113px;
            border-top-left-radius: 6px;
          }
          td:nth-child(2) {
            min-width: 206px;

            a {
              color: $light-blue;
              text-decoration: underline;
            }
          }
          td:nth-child(3) {
            min-width: 190px;
          }
          td:nth-child(4) {
            min-width: 213;
          }
          td:nth-child(5) {
            min-width: 222px;
          }
          td:last-child {
            min-width: 92px;
            border-top-right-radius: 6px;
          }
        }
      }
    }
  }
}
