@use '../../global/scss/tools' as nsw;

.nsw-content-block {
  --nsw-icon-colour-dark: var(--nsw-text-dark);
  --nsw-icon-colour-accent: var(--nsw-brand-supplementary);

  &__title {
    font-weight: var(--nsw-font-bold);
    text-wrap: pretty;
    
    @include nsw.font-size('lg');
  }

  &__copy {
    text-wrap: pretty;
  }

  &__list {
    padding: 0;
    list-style-type: none;

    li {
      margin: 0;
      padding: nsw.rem(8px) 0 nsw.rem(8px) nsw.rem(14px);
      position: relative;

      &::before {
        content: '';
        position: absolute;
        width: nsw.rem(4px);
        height: nsw.rem(4px);
        border-radius: 100%;
        background-color: var(--nsw-text-dark);
        top: nsw.rem(18px);
        left: 0;
      
        .nsw-section--invert & {    
          background-color: var(--nsw-text-light);
        }
      }
    }
  }

  &__link {
    margin-top: nsw.rem(16px);
  }

  &__image {
    max-height: nsw.rem(200px);
    margin-bottom: nsw.rem(24px);

    img {
      width: 100%;
      height: nsw.rem(200px);
      object-fit: cover;      
    }
  }

  &__icon {
    max-width: nsw.rem(64px);
    max-height: nsw.rem(64px);

    svg {
      max-width: nsw.rem(64px);
      max-height: nsw.rem(64px);

      .nsw-section--invert & {
        --nsw-icon-colour-dark: var(--nsw-text-light);
      }
    }
  }
}