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

$hover-color: color('primary-2');

.text {
  @include typography-b-8;
}

.add-card {
  @extend %card;

  height: 100%;
  padding: ru(1.5);
  text-align: center;
  text-decoration: none;
  color: color('primary-3');
  background-color: transparent;
  border: 1px dashed color('neutral-3');
  cursor: pointer;
  transition: color 150ms ease-out,
    border-color 150ms ease-out;


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

.icon {
  margin: 0 auto ru(1);
  height: ru(1.25);
  max-width: ru(1.25);

  path {
    fill: color('primary-3');
  }
}

/* -- Variants -- */
.disabled:hover,
.disabled:active,
.disabled {
  cursor: default;

  color: color('neutral-4');
  border-color: color('neutral-4');

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