@import '../shared/cards.module.scss';

.stacked {
  @extend %card;

  padding-left: 0;
  list-style-type: none;
}

.stacked-li {
  border-top: $border;

  &:first-child {
    border: none;
  }
}

.inverted {
  background-color: transparent;
  color: color('neutral-8');
  border-color: color('neutral-8');

  .icon path {
    fill: color('neutral-8');
  }

  .stacked-li {
    border-top: 1px solid color('neutral-8');

    &:first-child {
      border: none;
    }

    &:hover {
      background-color: color('neutral-8');
      color: color('brand-2');

      .icon path {
        fill: color('brand-2');
      }
    }
  }
}