$component-name: form-field-checkbox-group;

.#{$component-name} {
  @include form-field;
  display: block;

  &__option {
    &:last-child {
      margin: 0;
    }
  }

  &__error {
    opacity: 0;
    background: var(--error);
    color: var(--text);
    transition: opacity var(--animation-easing) var(--animation-duration-standard),
    max-height var(--animation-easing) var(--animation-duration-standard);
    padding: 0.5rem 0.25rem;
    display: flex;
    align-items: center;

    svg {
      max-height: 1.2rem;
    }
  }

  &--has-error {
    .#{$component-name}__error {
      opacity: 1;
    }

    .form-field {
      margin-bottom: 0;
      border: 0.125rem solid var(--error);
    }

  }
}