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

.wrapper {
  margin-top: 12px;

  li {
    border-radius: $border-radius;
    box-shadow: 0 6px 16px 0 rgba(33, 43, 54, 0.2);
    background-color: #ffffff;

    & + li {
      margin-top: 12px;
    }

    &:hover {
      .footer button {
        display: inline-block;
      }
    }
  }
}

.content {
  display: flex;
  padding: 20px;

  .icon {
    margin-top: 5px;
    width: 40px;
    height: 40px;
    padding: 8px;
    border-radius: 100px 0 100px 100px;
    background-color: #329dce;
  }

  .text {
    padding-left: 20px;

    :global {
      .h5 {
        line-height: 1.5;
      }
    }
    
    p {
      margin-top: 5px;
      color: #79879c;
    }
  }
}

.footer {
  height: 48px;
  border-radius: 0 0 $border-radius $border-radius;
  padding: 8px 20px;
  background-color: $lightest;
  text-align: right;

  button + button {
    margin-left: 12px;
  }

  button {
    display: none;  
  }
}
