.card {
  background: $white;
  border: 1px solid $light-grey;
  border-radius: 8px;
  box-shadow: $card-shadow;
  padding: 32px;
  position: relative;

  &-header {
    color: $primary;
    margin-bottom: 16px;
  }
  @include respond(phone) {
    background: transparent;
    border: 0;
    box-shadow: none;
    padding: 18px;
  }

  &.action-card {
    overflow: hidden;
    min-width: 280px;
    min-height: 420px;
    background: linear-gradient(
      to bottom,
      white 0%,
      white 50%,
      white 80%,
      $bg-grey 80%,
      $bg-grey 100%
    );

    .card-header {
      color: $black;
      margin-bottom: 4px;
    }

    .card-description {
      color: $dark-grey;
      margin-bottom: 16px;
    }

    .card-image {
      position: absolute;
      bottom: -5px;
      left: 0;
      right: 0;
      max-height: 200px;

      img,
      svg {
        width: 100%;
      }
    }
  }

  &.icon-card {
    @include display-flex(flex-start, flex-start);
    padding: 24px;

    .card-icon {
      @include display-flex(center);
      min-width: 82px;
      width: 82px;
      height: 82px;
      border-radius: 8px;
      margin-right: 16px;

      img,
      svg {
        width: 40px;
        height: auto;
      }
    }

    .card-header {
      color: $black;
      margin-bottom: 4px;
    }

    .card-description {
      a {
        color: $primary;
      }
    }
  }

  &.info-card {
    padding: 16px;
    font-size: 14px;
    box-shadow: none;
    letter-spacing: -0.006px;
    line-height: 24px;
  }

  &.knowledge-card {
    background: linear-gradient(
      91.74deg,
      #f0f8e8 -130.66%,
      rgba(240, 248, 232, 0) 115.2%
    );
    border-radius: 16px;
    padding: 32px;
    margin-bottom: 32px;

    .card-header {
      color: $black;
      margin-bottom: 8px;
    }

    .card-close {
      display: flex;
      cursor: pointer;
      width: 15px;
      position: absolute;
      top: 32px;
      right: 32px;

      svg {
        path {
          stroke: #737a91;
        }
      }
    }

    .card-action {
      margin-top: 16px;
    }
  }

  &.notification-card {
    border-bottom: 0;
    border-radius: 0;
    box-shadow: none;

    &:first-child {
      border-top-left-radius: 8px;
      border-top-right-radius: 8px;
      border-bottom: 0;
    }

    &:last-child {
      border-bottom-left-radius: 8px;
      border-bottom-right-radius: 8px;
      border-bottom: 1px solid $light-grey;
    }

    .card-notification-action {
      position: absolute;
      top: 32px;
      right: 32px;

      @include respond(phone) {
        position: relative;
        top: unset;
        right: unset;
      }
    }

    .card-header,
    .card-description {
      max-width: 65%;

      @include respond(phone) {
        max-width: none;
      }
    }

    .card-header {
      @include respond(phone) {
        margin-bottom: 4px;
      }
    }

    .card-description {
      margin: 16px 0;
    }
  }
}