@import '../../styles/common';
@import '../../styles/vendor/bootstrap_foundation-sites';

.s-contact {
  // prevent margin to collapse
  &::before {
    display: table;
    content: '';
    clear: both;
    height: 0;
    margin-top: -1px;
  }

  padding-bottom: map_get($co-margin_, 'xlarge');
  background: $co-color__fg__back;

  &__tags {
    margin-top: map_get($co-margin_, 'small');
    margin-right: map_get($co-margin_, 'xsmall');
    margin-bottom: map_get($co-margin_, 'small');
    margin-left: map_get($co-margin_, 'xsmall');
  }

  &__main-title,
  &__contact-details,
  &__keys,
  &__form {
    margin-right: map_get($co-margin_, 'xsmall');
    margin-left: map_get($co-margin_, 'xsmall');
  }

  &__details-group:not:first-of-type {
    border-bottom: 2px solid rgb(141 206 236 / 20%);
  }

  &__detail {
    margin-left: 1.5rem;
  }

  &__edit-bar {
    margin-top: map_get($co-margin_, 'small');
    text-align: right;
  }

  &__action {
    margin-left: map_get($co-margin_, 'xsmall');
  }

  @include breakpoint(medium) {
    &__main-title,
    &__contact-details,
    &__keys,
    &__last-messages,
    &__tags,
    &__form {
      margin-right: map_get($co-margin_, 'large');
      margin-left: map_get($co-margin_, 'large');
    }

    &__tags {
      text-align: right;
    }
  }

  @include breakpoint(large) {
    &__main-title,
    &__contact-details,
    &__keys,
    &__last-messages,
    &__tags,
    &__form {
      margin-right: map_get($co-margin_, 'xlarge');
      margin-left: map_get($co-margin_, 'xlarge');
    }
  }
}
