@import './common/var.css';

.van-contact-card {
  position: relative;
  background-color: $white;

  &:active {
    background-color: $active-color;
  }

  &--uneditable {
    &:active {
      background-color: $white;
    }
  }

  &--add {
    line-height: 40px;

    .van-contact-card__icon {
      width: 40px;
      color: $blue;
      font-size: 40px;
    }
  }

  &--edit {
    .van-contact-card__icon {
      font-size: 18px;
      vertical-align: top;
    }
  }

  &__content {
    padding: 15px 10px;
  }

  &__icon,
  &__text {
    display: inline-block;
    vertical-align: middle;
  }

  &__icon {
    margin-right: 10px;
  }

  &__text {
    line-height: 20px;
    font-size: 14px;
  }

  &__arrow {
    top: 50%;
    right: 10px;
    font-size: 12px;
    position: absolute;
    color: $gray-dark;
    transform: translate3d(0, -50%, 0);
  }

  &::after {
    content: '';
    display: block;
    height: 2px;
    background: repeating-linear-gradient(
      -45deg,
      #ff6c6c 0,
      #ff6c6c 20%,
      transparent 0,
      transparent 25%,
      #3283fa 0,
      #3283fa 45%,
      transparent 0,
      transparent 50%
    );
    background-size: 80px;
  }
}