.offer-editing {
  display: flex;
  gap: 1rem;
}

.job-description,
.candidate-description {

  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    font-size: var(--font-size-m);
  }
}

.pf-label,
.selected span {
  font-size: var(--font-size-xs);
  line-height: 1.875;
  display: inline-block;
  border-radius: 0.25rem;
  color: var(--canvas-text);
  background-color: light-dark(var(--color-3), var(--color-12));
  padding: 0.1rem 0.5rem;
  margin: 0 0.25rem 0.5rem;
}

.job-address {
  .formatted {
    white-space: pre;
  }
}

.offer-details {
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--grid-gutter) / 4) var(--grid-gutter);
  margin-block-start: 1lh;

  h1 {
    margin-block-end: 1lh;
  }

  .offer-apply {
    margin-block: var(--grid-gutter);
    padding-inline-start: var(--grid-gutter);

    .button {
      line-height: 1.5;
      background-color: rgb(114, 177, 158);
      border-color: rgba(114, 177, 158, 25%);
      text-align: center;
      padding: 0.33 0.5rem;
    }
  }

  .content {
    flex-basis: 0;
    flex-grow: 999;
    min-inline-size: 20rem;
  }

  aside {
    container: aside / inline-size;
    flex-basis: 24rem;
    flex-grow: 1;
  }
}

.application-instructions {
  background-color: light-dark(var(--color-3), var(--color-13));
  border-radius: var(--radius-1);
  padding-inline: calc(var(--grid-gutter) /2);
  margin-inline: calc(var(--grid-gutter) / -2);
  margin-block: 1lh;
  padding-block: 0.5lh;

  h3 {
    margin-block-start: 0;
  }
}

.offer-aside {

  .employer-logo,
  .important-dates {
    padding-block: 0 1lh;
    margin-block: 0 1lh;
    border-bottom: 1px solid var(--light-border-color);
  }

  img.logo {
    width: 100%;
  }

  p:has(svg),
  dt:has(svg) {
    text-indent: calc(-1 * var(--grid-gutter));
    padding-inline-start: var(--grid-gutter);

    &>svg:first-child {
      position: relative;
      vertical-align: text-bottom;
      margin-inline-end: 0.25rem;

      * {
        stroke-width: 0.09375rem;
      }
    }
  }
}

.important-dates dd {
  font-weight: 600;
}

.employer.description,
.organization.description {
  .content {
    h2 {
      font-size: var(--font-size-l);
      color: var(--gray-text);
    }

    h2:first-of-type {
      margin-block-start: 0;
    }
  }

  .logo {
    float: right;
    margin-inline: calc(var(--grid-gutter) / 2) 0;
    margin-block: 0 0.5lh;
    min-width: 5.5rem;
    width: 20cqi;
    max-width: 15rem;
  }

  .empty-logo {
    opacity: 15%;
  }
}

/* not exactly sure if this works
.employer.description p {
  color: var(--gray-text);
  font-weight: 500;
}
*/

.offer-list {
  container: offer-listing / inline-size;
}


/* A single offer in the public and candidate offer lists */
.offer-listing {
  margin-block: 1rem;
  padding-block: 1rem;
  display: flex;
  justify-content: space-between;
  gap: 1rem var(--grid-gutter);
  border-bottom: 1px solid var(--light-border-color);

  &.with-bg {
    margin-block: 0;
    border-bottom: none;

    .content {
      background-color: var(--surface-light-1);
      padding: calc(var(--grid-gutter) / 2);
      border-radius: var(--button-border-radius);
    }
  }

  &:last-of-type {
    border-bottom: none;
  }

  .logo {
    min-width: 20cqi;
    max-width: 20cqi;

    img {
      padding: calc(var(--grid-gutter) / 3);
      border-radius: var(--button-border-radius);
      background-color: #fff;
    }

  }

  .content {
    display: flex;
    flex-grow: 1;
    flex-direction: column;
    gap: 0.75rem;


    h2 {
      font-size: var(--font-size-m);
      text-wrap: wrap;
      margin-block: 0 0.5rem;
    }

    h3 {
      font-size: var(--font-size-m);
      text-wrap: wrap;
      margin-block: 0 0.5rem;
      color: var(--gray-text);
    }

    &>div:has(svg) {
      display: inline-flex;
      gap: 0.25rem;
    }
  }

  @container offer-listing (width < 480px) {
    .logo {
      width: 25%;
      max-width: unset;
      min-width: unset;
    }

    .content {
      width: 75%;
    }
  }

  @container offer-listing (width < 350px) {

    .logo {
      display: none;
    }

    .content {
      width: 100%;
    }

  }

}


#offer-filter-panel {
  background-color: var(--color-3);
  padding: 0 1rem;

  .toggle-offer-filter {
    float: right;
    margin-block-start: 1.25rem;
  }

  fieldset {
    margin-block: 0;
    padding-block: 0;

    legend {
      font-size: var(--font-size-m);
      font-weight: bold;
      color: var(--canvas-text);
    }
  }

  .practise-fields .selected span,
  .locations .selected span {
    font-size: var(--font-size-xs);
    line-height: 1.875;
    display: inline-block;
    border-radius: 0.25rem;
    color: var(--canvas-text);
    background-color: var(--canvas);
    padding: 0.1rem 0.5rem;
    margin: 0 0.25rem 0.5rem;
  }
}


/* employer current-offers */
.current-offers {

  .title {
    font-size: var(--font-size-m);
    display: block;
  }

  .organization {
    display: block;
  }

  .dates {
    color: var(--light-text);
  }

}