@use '@foblex/flow/styles' as flow-theme;

::ng-deep {
  @include flow-theme.theme-tokens();
}

::ng-deep f-flow {
  @include flow-theme.connection($scoped: false);
}

.mat-mdc-card {
  max-width: 300px;
  color: var(--ff-node-color);
  background: var(--ff-node-background-color);
  cursor: move;

  .mat-mdc-card-subtitle {
    color: var(--ff-node-color);
  }

  &:active {
    box-shadow: var(--ff-node-shadow);
  }
}

.example-header-image {
  background-image: url('https://material.angular.io/assets/img/examples/shiba1.jpg');
  background-size: cover;
}

.simple-node {
  @include flow-theme.node($selectorless: true);
  width: unset;
}

img {
  pointer-events: none;
  margin-bottom: 16px;
}