@use "design-system/palette";
@use "design-system/typography";

@use "cogs/radio";
@use "cogs/checkbox";
@use "cogs/disabled";
@use "cogs/error";

@mixin cogs {
  padding: 0;
  margin: 1rem 0;

  &:first-child /* stylelint-disable-line nesting-selector-no-missing-scoping-root */ {
    margin-top: 0;
  }

  &:last-child /* stylelint-disable-line nesting-selector-no-missing-scoping-root */ {
    margin-bottom: 0;
  }

  line-height: 1.375rem;

  &.radio /* stylelint-disable-line nesting-selector-no-missing-scoping-root */ {
    @include radio.cog-radio;
  }

  &.checkbox /* stylelint-disable-line nesting-selector-no-missing-scoping-root */ {
    @include checkbox.cog-checkbox;
  }

  &.disabled /* stylelint-disable-line nesting-selector-no-missing-scoping-root */ {
    @include disabled.cog-disabled;
  }

  &.error /* stylelint-disable-line nesting-selector-no-missing-scoping-root */ {
    @include error.cog-error;
  }

  .description {
    @include typography.secondary-text;

    & /* stylelint-disable-line no-duplicate-selectors */ {
      display: block;
      padding: 0;
      margin: 0 0 0.25rem 0;
    }
  }

  .error-message {
    @include typography.error-standard;

    & /* stylelint-disable-line no-duplicate-selectors */ {
      display: block;
      padding: 0;
      margin: 0 0 0.25rem 0;
    }
  }
}

%cogs {
  @include cogs;
}