$notice-pointer-size: 8px !default;
$notice-padding: 1em !default;
$notice-default-border-width: 1px !default;
$notice-default-border-width: 1px !default;
$notice-default-bg: #fff !default;
$notice-default-border-colour: $colour-grey-lightmid !default;
$notice-animation-timing: 350ms !default;

@mixin notice-pointer-up($border-colour, $bg-colour) {
  &.notice--pointer-up::before {
    border-bottom-color: $border-colour;
  }

  &.notice--pointer-up::after {
    border-bottom-color: $bg-colour;
  }
}

@mixin notice-pointer-down($border-colour, $bg-colour) {
  &.notice--pointer-down::before {
    border-top-color: $border-colour;
  }

  &.notice--pointer-down::after {
    border-top-color: $bg-colour;
  }
}

@mixin notice-pointer-all($border-colour, $bg-colour) {
  @include notice-pointer-up($border-colour, $bg-colour);
  @include notice-pointer-down($border-colour, $bg-colour);
}

@mixin notice($border-colour, $bg-colour, $font-colour) {
  @include notice-pointer-all($border-colour, $bg-colour);

  color: $font-colour;
  border-radius: $radius-default;
  padding: $notice-padding;
  background-color: $bg-colour;
  border: $notice-default-border-width solid $border-colour;
}

// Injected by the JS
.notice-container {
  position: fixed;
  top: $column-gutter;
  left: 0;
  width: calc(100% - (#{$column-gutter * 2}));
  margin: 0 $column-gutter;
}

.notice {
  @include notice(
    $notice-default-border-colour,
    $notice-default-bg,
    $color-font-default
  );
  opacity: 1;
  transition: opacity $notice-animation-timing ease-out;

  & + & {
    margin-top: 15px;
  }

  &.fade--out {
    opacity: 0;
  }

  &.slide-in--top {
    animation-name: notice-slide-in--top;
    animation-duration: $notice-animation-timing;
    animation-timing-function: ease-out;
  }
}

.notice--info {
  @include notice(
    $notice-info-border-colour,
    $notice-info-bg,
    $notice-info-font-colour
  );
}

.notice--success {
  @include notice(
    $notice-success-border-colour,
    $notice-success-bg,
    $notice-success-font-colour
  );
}

.notice--error {
  @include notice(
    $notice-error-border-colour,
    $notice-error-bg,
    $notice-error-font-colour
  );
}

.notice--info,
.notice--success,
.notice--error {
  font-weight: 700;
}

.notice--close {
  position: relative;
  padding-right: calc(#{$notice-close-size} + (2 * #{$notice-padding}));
}

.notice__close {
  position: absolute;
  top: 50%;
  right: $notice-padding;
  margin-top: -($notice-close-size / 2);

  &:hover {
    background-color: $colour-grey-xlight;
  }

  &--info:hover {
    background-color: rgba($notice-info-border-colour, 0.5);
  }

  &--success:hover {
    background-color: rgba($notice-success-border-colour, 0.2);
  }

  &--error:hover {
    background-color: rgba($notice-error-border-colour, 0.2);
  }
}

.notice--pointer {
  &-up,
  &-down {
    position: relative;

    &::before,
    &::after {
      border: solid transparent;
      content: "";
      height: 0;
      width: 0;
      position: absolute;
      pointer-events: none;
    }

    &::before {
      border-width: $notice-pointer-size;
    }

    &::after {
      border-width: ($notice-pointer-size - (2 * $notice-default-border-width));
    }
  }

  &-up {
    margin-top: 1em;

    &::before,
    &::after {
      left: 50%;
      margin-left: -($notice-pointer-size - (2 * $notice-default-border-width));
      bottom: 100%;
    }

    &::before {
      margin-left: -$notice-pointer-size;
    }
  }

  &-down {
    margin-bottom: 1em;

    &::before,
    &::after {
      left: 50%;
      margin-left: -($notice-pointer-size - (2 * $notice-default-border-width));
      top: 100%;
    }

    &::before {
      margin-left: -$notice-pointer-size;
    }
  }
}

// Animations for notices
@keyframes notice-slide-in--top {
  0% {
    transform: translateY(-100%);
  }

  100% {
    transform: translateY(0);
  }
}