.area-list {

  display: inline;

  &-item {

    display: inline-block;
    border: 2px solid $black;
    // Create space for the remove link on the right of the list item (including borders)
    padding: (govuk-spacing(1) + 1px) (govuk-spacing(2) + 37px) govuk-spacing(1) govuk-spacing(2);
    margin: 0 govuk-spacing(1) govuk-spacing(2) 0;
    position: relative;

    &-remove {

      display: block; // fallback for browsers that don't support flexbox
      display: flex;
      // center SVG vertically and horizontally
      align-items: center;
      justify-content: center;
      position: absolute;
      top: -2px; // cover list-item border-top
      right: -2px; // cover list-item border-right
      bottom: -2px; // cover list-item border-bottom
      width: 37px;
      padding: 0;
      border: 2px solid $govuk-blue;
      border-left: none;
      text-align: center;
      font-size: inherit; // counter govuk-button styles
      line-height: 36px; // match area-list-item for browsers that don't support flexbox

      // set styles so they don't get overriden by govuk-button styles
      &,
      &:hover {
        background: $govuk-blue;
      }

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

      // set styles so they don't get overriden by govuk-button styles
      &:active {
        top: -2px;
      }

      // The box-shadow that separates the remove link from the list item is hidden in
      // high contrast mode. Remake using a border instead
      // Also sets text colour to match govuk-button
      @media (-ms-high-contrast: active), (forced-colors: active) {

        &:link,
        &:active,
        &:hover,
        &:focus:not(:active):not(:hover) {
          border-left: 2px solid $govuk-blue;
          color: LinkText;
        }

      }

      // set styles so they don't get overriden by govuk-button styles
      &,
      &:focus,
      &:focus:not(:active):not(:hover) {
        box-shadow: -2px 0 0 0 $black, inset 1px 0 0 0 rgba($white, 0.1);
      }

      // set styles so they don't get overriden by govuk-button styles
      &:focus,
      &:focus:not(:active):not(:hover) {
        border-color: $black;
      }

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

      // show outline to make focus visible when background colours are overridden
      @media (-ms-high-contrast: active), (forced-colors: active) {

        // set styles so they don't get overriden by govuk-button styles
        &:focus:not(:active):not(:hover) {
          outline: 3px solid transparent;
        }

        // override hover styles when focused, to preserve dimensions and outline
        &:focus:hover {
          top: -2px;
          right: -2px;
          bottom: -2px;
          width: 37px;
        }

      }
    }

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

    &--unremoveable {
      padding-right: govuk-spacing(2);
      background: $light-blue-25;
      color: mix($black, $govuk-blue, 66%);
      border-color: $light-blue-25;
      margin: 0 govuk-spacing(1) govuk-spacing(2) 0;
      font-weight: bold;
    }

    &--smaller {
      @include bold-16;
    }

  }

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

}

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

.area-list-key {

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

  &__icon {
    position: absolute;
    left: -5px;
    top: -7px;
  }

  &--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;
    }
  }

}

.area-list-map-details {

  .govuk-details__summary {
    display: block;
    padding-top: govuk-spacing(1);
    padding-bottom: govuk-spacing(1);
    margin-top: 1px;
  }

  .govuk-details__text {
    padding: 0;
    border: none;
    border-bottom: 1px solid $border-colour;
    margin-top: -1px;
  }

}