@import '~scss/variables';
@import '~scss/mixins';

.info {
  position: relative;
  padding: 12px 20px;
  border-radius: $border-radius;
  background-color: $card-bg-color;

  .icon {
    position: absolute;
    top: 12px;
    left: 20px;
    width: 40px;
    height: 40px;
    overflow: hidden;

    img {
      width: 100%;
      height: 100%;
    }
  }
}

.text {
  padding-left: 60px;
  min-height: 40px;

  & > div {
    @include TypographyTitleH6($dark-color07);
    font-size: 14px;
    line-height: 20px;
  }

  & > p {
    @include TypographyParagraph($dark-color01);
    max-height: 40px;
    word-break: break-all;
    overflow: hidden;
  }
}

.link {
  display: block;
  width: 100%;
  cursor: pointer;
  transition: all $trans-speed cubic-bezier(0.175, 0.35, 0.32, 1);

  &:hover {
    box-shadow: $card-selector-shadow;
  }
}

.large {
  padding: 20px;

  .icon {
    top: 20px;
  }
}