@use 'sass:map';
@use '@finastra/angular-theme' as fds;
@use '@finastra/fds-theme/color';

@mixin theme($theme) {
  $primary: fds.get-color-from-token(primary, null, $theme);

  .selectable-card,
  .selected-card {
    border: 1px solid transparent;
    cursor: pointer;
    .checked {
      display: none;
    }

    &:hover {
      background: rgba($primary, 0.05);
      .checked {
        display: block;
        position: absolute;
        right: fds.$uxg-spacing-2;
        top: fds.$uxg-spacing-2;
        .mat-icon {
          @include color.color(primary);
        }
      }
    }
  }

  .selected-card {
    border: 1px solid var(--fds-primary);
    background: rgba($primary, 0.1);

    .checked {
      display: block;
      position: absolute;
      right: fds.$uxg-spacing-2;
      top: fds.$uxg-spacing-2;
      .mat-icon {
        @include color.color(primary);
      }
    }

    &:hover {
      background: rgba($primary, 0.1);
      .checked {
        .mat-icon {
          @include color.color(primary);
        }
      }
    }
  }
}