// Prints out error messages
// $location defaults to 'before'. 'after' is recommended for inline elements
@mixin error($message, $location: 'before') {
  &::#{$location} {
    content: '\26A0 ERROR: ' $message; // \26A0 => ⚠
    display: inline-block;

    background: red;
    padding: .5em 1em;
    margin: .5em;
    border:  1px solid darkred;

    color:   white;
    font-size: 1.2rem;
  }
}


// Deprecated selectors
// ------------------------------------

$deprecated: (
  // selector                   // alternative (or null)
  '.page-row':                  '`.row`',
  '.page':                      '`.container`',
  '.full-width':                null,
  '.hero2':                     '`.hero-large`',
  '.hero1':                     '`.hero-larger`',
  '.jumbo':                     '`.hero-largest`',
  '.hero-largest':              '`.hero-heading`',
  '.hero-larger':               '`.hero-heading`',
  '.hero-large':                '`.hero-heading`',
  'i.icon':                     'the `icon` helper',
  '.jumbotron':                 null,
  '.light':                     null,
  '.u-bg-light-blue':           '`.u-bg-electric-blue`',
  '.u-text-color-light-blue':   '`.u-text-color-electric-blue`',
  '.u-vertical-padding-gutter': '`.u-vertical-padding-half`',
);

@each $selector, $alternative in $deprecated {
  $message: '`#{$selector}` is deprecated.';

  @if $alternative {
    $message: '#{$message} Use #{$alternative} instead.';
  } @else {
    $message: '#{$message} Please check the UI Kit documentation for an alternative.';
  }

  #{$selector} {
    @include error($message);
  }
}


// Alerts
// ------------------------------------

.alert:not(.alert-dismissible) .close {
  @include error('`.alert` requires the `.alert-dismissible` class if it contains a `.close` button');
}

.alert:not([role*="alert"]) {
  @include error('`.alert` requires a `role="alert"` attribute');
}


// Buttons
// ------------------------------------

.btn-default,
.btn-primary,
.btn-secondary,
.btn-success,
.btn-danger,
.btn-outline,
.btn-link {
  &:not(.btn) {
    @include error('Missing the `.btn` class');
  }
}

.btn.btn[class^="col-"],
.btn.btn[class*=" col-"] {
  @include error('Don’t use `.col-` classes directly on `.btn`. Instead, add `.btn-block` to your button and nest it within a `.col-`.')
}


// Cards
// ------------------------------------

.card > [class^="col-"] {
  @include error('Columns inside `.card`s need to be wrapped within a `.row` or `.clearfix` element');
}


// Card Cells
// ------------------------------------

.card-cells .card:not([class*="col-"]) {
  @include error('Card-cell `.card`s require a `.col-` class');
}

.card-cells {
  > [class^="col-"],
  > [class*=" col-"] {
    @include error('Columns inside `.card-cell`s need to be wrapped within a `.row`');
  }
}


// Fonts
// ------------------------------------

.proxima-not-loaded,
.circular-not-loaded {
  @include error('Web fonts were not properly loaded. Check that Avvo UI’s font loader JavaScript is loaded correctly.');

  @keyframes delayed-appearance {
    from  { top: -100px; }
    to    { top:   10px; }
  }

  &::before {
    position: fixed;
    top: -100px;
    left: 24%;
    width: 52%;
    z-index: 9000;
    animation: delayed-appearance 400ms 5s forwards;

    font-size: 14px;
  }
}

[class*="u-font-weight-"] {
  @include error('`.u-font-weight-{x}` is deprecated, please remove the class or use `.strong`.');
}


// Grid
// ------------------------------------

.container .container {
  @include error('`.container`s cannot be nested within each other');
}

[class^="col-"],
[class*=" col-"],
.container {
  // scss-lint:disable SelectorDepth
  > [class^="col-"],
  > [class*=" col-"],
  > :not(.row) > [class^="col-"],
  > :not(.row) > [class*=" col-"],
  > :not(.row) > :not(.row) > [class^="col-"],
  > :not(.row) > :not(.row) > [class*=" col-"],
  > :not(.row) > :not(.row) > :not(.row) > [class^="col-"],
  > :not(.row) > :not(.row) > :not(.row) > [class*=" col-"],
  > :not(.row) > :not(.row) > :not(.row) > :not(.row) > [class^="col-"],
  > :not(.row) > :not(.row) > :not(.row) > :not(.row) > [class*=" col-"] {
    @include error('Columns (`.col-`) need a `.row` parent class. Don’t nest columns within columns.');
  }
}

.form-horizontal .form-group:not(.row) {
  @include error('A `.form-group` within a `.form-horizontal` must have a `.row` class to display properly.')
}


// Headings
// ------------------------------------
// scss-lint:disable SingleLinePerSelector
h1,h2,h3,h4,h5,h6 {
  &.strong {
    @include error('For design consistency, all headings must use their default font weight. Please remove the `.strong` class.');
  }

  strong,
  .strong,
  em,
  b,
  i {
    @include error('For design consistency, `strong`, `em`, and other font-style tags are no longer supported in headings.');
  }

  &[class*="u-font-size-"] {
    @include error('For design consistency, you must use an existing heading size. Please remove the `.u-font-size-x` class and try a different heading class to change size.')
  }
}

.h1,.h2,.h3,.h4,.h5,.h6 {
  &.hero-heading {
    @include error('`.hero-heading` can not be combined with a `.h1`-`.h6` class. Please choose a single heading class.');
  }
}

.hero-heading + .lead {
  @include error('Please use `.hero-text` instead of `.lead` when pairing text with a `.hero-heading`.');
}
// scss-lint:enable all


// Icons
// ------------------------------------

$deprecated-icons: (
  // icon          // replacement
  'user':          'person',
  'close':         'x',
  'close-circled': 'x-circled'
);

@each $icon, $replacement in $deprecated-icons {
  .icon-#{$icon} {
    @include error('The “#{$icon}” icon is deprecated; use “#{$replacement}” instead.', after);
  }
}


// Spacing
// ------------------------------------

.row,
.clearfix {
  &[class*="u-vertical-padding-"] {
    @include error('`u-vertical-padding-X` can not be combined with `.row` or `.clearfix`');
  }
}

.pull-left  + [class*="u-vertical-padding-"],
.pull-right + [class*="u-vertical-padding-"] {
  @include error('`u-vertical-padding-X` doesn’t render correctly in some browsers when following a `.pull-left` or `.pull-right`. You can fix it by nesting inside an empty div or other element.')
}


// Text Columns
// ------------------------------------

[class*="text-columns-"]:not(.text-columns) {
  @include error('`' attr(class) '` requires the `.text-columns` class');
}