@use 'pix-design-tokens/typography';

.element-text {
  table {
    width: 100%;
    background: var(--pix-neutral-0);
    border-collapse: collapse;
  }

  th, td {
    padding: 1rem;
    vertical-align: top;
    border-bottom: 1px solid var(--pix-neutral-100);

    &.width-auto { width: auto; }
    &.width-15 { width: 15%; }
    &.width-20 { width: 20%; }
    &.width-30 { width: 30%; }
    &.width-full { width: 100%; }
  }

  th {
    font-weight: var(--pix-font-bold);
    background: var(--pix-primary-10);
  }

  th[scope="row"] {
    text-align: left;
  }

  td {
    width: 26.66%;
  }

  tr:last-child th, tr:last-child td {
    border-bottom: none;
  }

  @media (max-width: 600px) {
    th, td {
      padding: 0.75rem;
    }
  }

  fieldset {
    padding: var(--pix-spacing-2x);
    border: 2px dashed var(--pix-primary-700);
    border-radius: var(--pix-spacing-2x);
  }

  legend {
    @extend %pix-body-s;

    display: inline-flex;
    gap: var(--pix-spacing-2x);
    align-items: center;
    padding: 0 var(--pix-spacing-2x);
    color: var(--pix-primary-700);
  }
}
