$component-name: step;

.#{$component-name} {
  .address {
    margin: 1px;
    border: 1px solid $gray-200;

    &,
    &__content {
      cursor: pointer;
    }

    &.selected {
      margin: 0;
      border: 2px solid $primary;
    }
  }

  dl {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    padding: 1rem;
    background: var(--bs-gray-100);
    border-radius: var(--bs-border-radius-sm);

    dd,
    dt {
      width: 50%;
      padding: 1rem 0;
      margin: 0;

      &:not(:last-of-type) {
        border-bottom: 1px solid var(--bs-gray-300);
      }
    }

    dd {
      text-align: right;
    }
  }
}
