/**
 * Frontend styles for Attribute Priorities table.
 */

.en-ap-table {
  --enap-font-size: 14px;
  --enap-label-color: #1d2327;
  --enap-value-color: #1d2327;
  --enap-link-color: #2271b1;
  --enap-row-border: #e3e5e8;
  --enap-row-bg: transparent;
  --enap-pad-y: 6px;
  --enap-pad-x: 8px;
  --enap-link-underline: none;
  --enap-card-bg: #ffffff;
}

.en-ap-table .tg {
  border-collapse: collapse;
  width: 100%;
  font-size: var(--enap-font-size);
}

.en-ap-table .tg tr {
  background: var(--enap-row-bg);
}

.en-ap-table.en-ap-zebra .tg tr:nth-child(odd) {
  background: var(--enap-zebra-odd);
}
.en-ap-table.en-ap-zebra .tg tr:nth-child(even) {
  background: var(--enap-zebra-even);
}

.en-ap-table .tg td {
  padding: var(--enap-pad-y) var(--enap-pad-x);
  border-bottom: 1px solid var(--enap-row-border);
  color: var(--enap-value-color);
  vertical-align: top;
  word-break: break-word;
}

.en-ap-table .tg td:first-child {
  width: 38%;
  font-weight: 600;
  color: var(--enap-label-color);
}

.en-ap-table .tg a {
  color: var(--enap-link-color);
  text-decoration: var(--enap-link-underline);
}

@media (max-width: 600px) {
  .en-ap-table .tg,
  .en-ap-table .tg tbody,
  .en-ap-table .tg tr,
  .en-ap-table .tg td {
    display: block;
    width: 100%;
  }
  .en-ap-table .tg tr {
    border: 1px solid var(--enap-row-border);
    border-radius: 8px;
    padding: 8px 10px;
    background: var(--enap-card-bg);
    margin-bottom: 8px;
  }
  .en-ap-table .tg td {
    padding: 2px 0;
    border-bottom: 0;
  }
  .en-ap-table .tg td:first-child {
    margin-bottom: 4px;
  }
}