/* tabatalk-jobs.css - Basic styles for job listings and filters */

.tabatalk-job-filters {
  display: flex;
  flex-flow: column wrap;
  align-items: center;
  gap: 1rem;
  margin-bottom: 2rem;
}

.job-filters-form {
  display: flex;
  gap: 1rem;
}

.job-filter-select {
  display: block;
  padding: 0.5rem 1rem;
  width: 100%;

  background: #fff;
  border: 1px solid #d1d5db;
  border-radius: 4px;

  font-size: 1rem;
}

.job-filters-status {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.job-filters-state {
  margin-left: 1rem;

  color: #6b7280;
}

.job-filters-clear {
  display: inline-block;
  margin-left: auto;

  cursor: pointer;

  color: #2563eb;
  text-decoration: underline;
}

.job-filters-clear:after {
  display: inline-block;
  margin-left: 0.5em;
  width: 1em;
  height: 1em;

  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='17' height='16' viewBox='0 0 17 16' fill='none'%3E%3Cpath d='M6.48475 4.86176C6.2244 4.60142 5.80229 4.60142 5.54194 4.86176C5.28159 5.12212 5.28159 5.54422 5.54194 5.80458L7.73721 7.99984L5.54194 10.1951C5.28159 10.4554 5.28159 10.8776 5.54194 11.1379C5.80229 11.3982 6.2244 11.3982 6.48475 11.1379L8.68001 8.94264L10.8753 11.1379C11.1356 11.3982 11.5577 11.3982 11.8181 11.1379C12.0784 10.8776 12.0784 10.4554 11.8181 10.1951L9.62281 7.99984L11.8181 5.80458C12.0784 5.54422 12.0784 5.12212 11.8181 4.86176C11.5577 4.60142 11.1356 4.60142 10.8753 4.86176L8.68001 7.05704L6.48475 4.86176Z' fill='%23000'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M16.0133 7.99984C16.0133 12.0499 12.7301 15.3332 8.68001 15.3332C4.62993 15.3332 1.34668 12.0499 1.34668 7.99984C1.34668 3.94975 4.62993 0.666504 8.68001 0.666504C12.7301 0.666504 16.0133 3.94975 16.0133 7.99984ZM14.68 7.99984C14.68 11.3136 11.9937 13.9998 8.68001 13.9998C5.36631 13.9998 2.68001 11.3136 2.68001 7.99984C2.68001 4.68613 5.36631 1.99984 8.68001 1.99984C11.9937 1.99984 14.68 4.68613 14.68 7.99984Z' fill='%23000'/%3E%3C/svg%3E");
  background-position: center;
  background-repeat: no-repeat;

  vertical-align: middle;

  content: '';
}

.tabatalk-job-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.tabatalk-job-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 2.5rem;

  background: #EBFBEE;
  border: 1px solid #D7F1DD;
  border-radius: 16px;
}

.tabatalk-job-item.no-results {
  display: none;

  text-align: center;
}

.job-title {
  margin: 0 0 1rem;

  color: #212529;
}

.job-meta {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.job-meta span {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  margin-right: 1rem;

  color: #6C757D;
  font-size: 14px;
}

.job-meta span:before {
  display: inline-block;
  margin-right: 0.4rem;
  width: 8px;
  height: 8px;

  border-radius: 50%;

  vertical-align: middle;

  content: '';
}

.job-meta span.job-department:before {
  background-color: #6800C9;
}

.job-meta span.job-type:before {
  background-color: #00865B;
}

.job-meta span.job-model:before {
  background-color: #35B855;
}

.job-meta span.job-location:before {
  display: none;
}

.job-location-flag {
  width: 16px;
  height: 12px;

  object-fit: contain;
}

@media screen and (max-width: 600px) {
  .tabatalk-job-filters {
    margin-bottom: 0.5rem;
  }

  .job-filters-form {
    flex-direction: column;
    gap: 1rem;
    width: 100%;
  }

  .job-filter-select {
    width: 100%;
  }

  .job-filters-status {
    flex-direction: column;
  }

  .job-filters-state,
  .job-filters-clear {
    margin: 0;

    text-align: center;
  }

  .tabatalk-job-item {
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
  }

  .job-item-main {
    width: 100%;
  }

  .job-title {
    margin-bottom: 1.5rem;

    font-size: 1.5rem;

    text-align: center;
  }

  .job-meta {
    display: grid;
    gap: 0.5rem;
    grid-template-columns: 1fr 1fr 1fr;
    margin-right: auto;
    margin-bottom: 0.75rem;
    margin-left: auto;
    width: 236px;
  }

  .job-meta span {
    display: flex;
    align-items: center;
    margin: 0;
    min-width: auto;
  }

  .job-item-action {
    width: 100%;

    text-align: center;
  }

  .job-meta span:before {
    width: 10px;
    height: 10px;
  }

  .job-location-flag {
    margin-right: 0.4rem;
    width: 12px;
    height: 12px;
  }

  span.job-location,
  span.job-type {
    grid-column: 1 / 3;
  }

  span.job-department,
  span.job-model {
    grid-column: 3 / 4;
  }

  .job-item-action.btn-plain--plain {
    min-width: 240px;
  }
}