.alert {
  @mixin _style-alert($border-colour, $bg-colour) {
    background: $bg-colour;
    border-left: 4px solid $border-colour;
  }

  padding: 20px;
  margin: 25px 0;

  &:focus {
    outline: 2px solid $yellow;
  }

  h3 {
    margin-top: 0;
  }

  .icon {
    float: left;
    margin: -1px 15px 0 0;
    padding: 5px;
    border: 2px solid $mellow-red;
    border-radius: 50%;
  }

  .alert-message {
    overflow: hidden;

    .alert-header,
    p {
      margin: 10px 0 0;
    }

    .alert-header {
      @include core-24;
      font-weight: bold;
      margin: 0 0 10px;
    }

    h4 {
      margin-top: 10px;
    }

    p:first-child {
      margin: 0;
    }
  }

  &-info {
    @include _style-alert($grey-2, $grey-4);
  }

  &-error {
    @include _style-alert($mellow-red, lighten($mellow-red, 43));
  }
}

.alert {
  @mixin _style-alert($border-colour, $bg-colour) {
    background: $bg-colour;
    border-left: 4px solid $border-colour;
  }

  padding: 20px;
  margin: 25px 0;
  outline: 0;

  h3 {
    margin-top: 0;
  }

  .icon {
    float: left;
    margin: -1px 15px 0 0;
    padding: 5px;
    border: 2px solid $mellow-red;
    border-radius: 50%;
  }

  .alert-message {
    overflow: hidden;

    .alert-header,
    p {
      margin: 10px 0 0;
    }

    .alert-header {
      @include core-24;
      font-weight: bold;
      margin: 0 0 10px;
    }

    h4 {
      margin-top: 10px;
    }

    p:first-child {
      margin: 0;
    }
  }

  &-info {
    @include _style-alert($grey-2, $grey-4);
  }

  &-error {
    @include _style-alert($mellow-red, lighten($mellow-red, 43));
  }
}

Remove outline on alert component
FE: Remove outline on alert component
