notifications-admin/app/assets/stylesheets/components/area-list.scss

.area-list {

  display: inline;

  &-item {

    display: inline-block;
    border: 2px solid $black;
    padding: (govuk-spacing(1) + 1px) (govuk-spacing(2) + 35px) govuk-spacing(1) govuk-spacing(2);
    margin: 0 govuk-spacing(1) govuk-spacing(2) 0;
    position: relative;

    &-remove {

      font-size: 0;

      &:before {
        content: "×";
        display: block;
        position: absolute;
        top: -2px;
        right: -2px;
        bottom: -2px;
        width: 35px;
        background: $govuk-blue;
        color: $white;
        box-shadow: -2px 0 0 0 $black, inset 1px 0 0 0 rgba($white, 0.1);
        border: 2px solid $govuk-blue;
        border-left: none;
        font-size: 24px;
        font-weight: normal;
        line-height: 40px;
        text-align: center;
        text-decoration: none;
      }

      &:hover,
      &:focus {

        &:before {
          color: $light-blue-25;
        }

      }

      &:focus {

        outline: none;

        &:before {
          background: $govuk-focus-colour;
          color: $black;
          border-color: $black;
        }

      }

    }

    &:last-child {
      margin-right: govuk-spacing(1) * 1.5;
    }

    &--unremoveable {
      padding-right: govuk-spacing(2);
      background: $light-blue-25;
      margin-right: govuk-spacing(3);
    }

  }

  .govuk-button {
    margin-left: 3px;
  }

}

#map {
  z-index: 50;
  margin-bottom: govuk-spacing(4);
}

.area-key {

  display: inline-block;
  position: relative;
  margin-right: govuk-spacing(3);
  margin-bottom: govuk-spacing(5);
  height: govuk-spacing(7);
  padding-left: govuk-spacing(8);
  line-height: govuk-spacing(7);

  &:before {
    content: "";
    display: block;
    position: absolute;
    top: 3px;
    left: govuk-spacing(1);
    width: govuk-spacing(6);
    height: govuk-spacing(6);
    box-sizing: border-box;
    margin-right: govuk-spacing(1);
    transform: rotate(45deg);
  }

  &--certain {
    &:before {
      border: 2px solid $black;
      background: $light-blue-50;
    }
  }

  &--likely {
    &:before {
      padding: 1px;
      border: 2px dashed $govuk-blue;
      border-image: file-url('dashed-border-govuk-blue.svg') 4 round;
      background: $light-blue-25;
    }
  }

  &--phone-estimate {
    padding-left: govuk-spacing(1);
    margin-right: 0;
    float: right;
    &:before {
      display: none;
    }
  }

}