pub.solar/_includes/styles/service.scss

.ps-service {
  margin-top: 2rem;
  margin-right: 1rem;

  &--header {
    margin: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 0.25rem solid black;
  };

  &--title {
    margin: 0;
  }

  &--links {
    display: flex;
    justify-content: flex-end;
    flex-wrap: wrap;
    flex-basis: 8rem;
    flex-grow: 1;
    max-width: 16rem;

    > * {
      margin-left: 2rem;
    }
  }

  &--description {
    margin: 0;

    > * {
      margin: 0;
      margin-top: 1rem;
    }
  }

  &--badges {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    margin-top: 1rem;

    @media screen and (min-width: 700px) {
      display: grid;
      grid-template-columns: 1fr 1fr;
      grid-gap: 0.5rem 1rem;
    }
  }

  &--badge {
    display: flex;
    justify-content: space-between;
    border-left: 0.25rem solid var(--accent);
    padding-left: 1rem;

    @media screen and (min-width: 700px) {
      flex-basis: 50%;
    }

    &_yes,
    &_fully-automated {
      border-left-color: #009d11;
    }

    &_partial,
    &_untested {
      border-left-color: #ff8f00;
    }

    &_not-applicable {
      border-left-color: #555;
    }

    &_no {
      border-left-color: var(--accent);
    }
  }

  &--badge-header {
    display: flex;
    justify-content: space-between;
    cursor: pointer;
  }

  &--badge-title {
    font-weight: bold;
  }

  &--badge-status {
    display: inline-flex;
  }

  $b: &;

  &--badge {
    &_yes #{$b}--badge-status,
    &_fully-automated #{$b}--badge-status {
      color: #007d0e;
    }

    &_partial #{$b}--badge-status,
    &_untested #{$b}--badge-status {
      color: #ac6100;
    }

    &_not-applicable #{$b}--badge-status {
      color: #555;
    }

    &_no #{$b}--badge-status {
      color: var(--accent);
    }
  }
}