/* recruit-positions-page.css */

/* ----- */

/* RecruitPositionCard.css */

.recruit-position-card-link {
  display: grid;
}

.recruit-position-card {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0 24px;
  padding: 18px 24px;
  border: 1px solid var(--border-color-gray);
  border-radius: var(--radius-xs);
}

@media all and (max-width: 1119.98px) {
  .recruit-position-card {
    grid-template-columns: 1fr;
    gap: 8px 0;
  }
}

.recruit-position-card-more-arrow {
  align-self: flex-end;
}

@media all and (max-width: 1119.98px) {
  .recruit-position-card-more-arrow {
    justify-self: flex-end;
  }
}

.recruit-position-card-details {
  display: flex;
  flex-direction: column;
  gap: 16px 0;
}

@media all and (max-width: 1119.98px) {
  .recruit-position-card-details {
    gap: 12px 0;
  }
}

.recruit-position-card-item {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 0 24px;
  align-items: center;
}

@media all and (max-width: 1119.98px) {
  .recruit-position-card-item {
    grid-template-columns: 1fr;
    gap: 8px 0;
  }
}

.recruit-position-card-item .item-label {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 8px;
  font-size: 12px;
  color: #fff;
  background: var(--bland-color-base);
  border-radius: 4px;
}

@media all and (max-width: 1119.98px) {
  .recruit-position-card-item .item-label {
    justify-self: flex-start;
    margin-top: 0;
  }
}

.recruit-position-card-item[data-type="salary"] .item-label {
  align-self: baseline;
  margin-top: 4px;
}

@media all and (max-width: 1119.98px) {
  .recruit-position-card-item[data-type="salary"] .item-label {
    margin-top: 0;
  }
}

.recruit-position-card-item .item-title {
  display: flex;
  gap: var(--spacing-gap-2xs);
  align-items: center;
  font-family: var(--font-family-body-jp);
  font-size: var(--font-size-xl);
  color: var(--color-gray-700);
}

.recruit-position-card-item .item-new-label {
  color: var(--color-alert);
}

.recruit-position-card-item .item-value {
  /* style */
}

.recruit-position-card-salary-details {
  /* style */
}

/* RecruitPositionList.css */

.recruit-position-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--section-spacing-lg);
  width: 100%;
  max-width: 100%;

  /* ----- */
}

.recruit-position-list .filter-select-menu-group {
  display: flex;
  flex-wrap: wrap;
  gap: var(--section-spacing-md);
  justify-content: flex-end;
}

@media all and (max-width: 1119.98px) {
  .recruit-position-list .filter-select-menu-group {
    justify-content: center;
  }
}

.recruit-position-list .filter-select-menu {
  position: relative;
  display: flex;
  align-items: flex-start;
  background: #fff;
  border: 1px solid var(--color-gray-300);
  border-radius: 12px;
}

@media all and (max-width: 1119.98px) {
  .recruit-position-list .filter-select-menu {
    width: 100%;
  }
}

.recruit-position-list .filter-select-menu > select {
  width: 100%;
  padding: var(--spacing-gap-sm);
  padding-right: calc(var(--spacing-gap-sm) + 24px + var(--spacing-gap-sm));
  border-radius: inherit;
}

.recruit-position-list .filter-select-menu > select:focus-visible,
.recruit-position-list .filter-select-menu > select:focus {
  outline: none;
  border: none;
}

.recruit-position-list .filter-select-menu:has(> select:focus, > select:focus-visible) {
  outline: 2px solid var(--bland-color-type03);
}

.recruit-position-list .filter-select-menu .icon {
  position: absolute;
  top: 50%;
  right: var(--spacing-gap-sm);
  transform: translate(0, -50%);
}

/* ----- */

.recruit-position-list .filter-refresh-button {
  display: flex;
  gap: var(--spacing-gap-2xs);
  align-items: center;
}

.recruit-position-list .filter-refresh-button > .label {
  color: #555;
}

/* ----- */

.recruit-position-list .recruit-position-list-items {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--section-spacing-lg);
  width: 100%;
  max-width: 100%;
}

.recruit-position-empty {
  min-height: 25svh;
  padding: 16px 24px;
}

.recruit-position-empty .empty-message {
  font-weight: var(--font-weight-bold);
  color: var(--placeholder-color);
}