@import '../../../@theme/styles/themes';

@include nb-install-component() {
  width: 100%;
  position: relative;
  padding-top: 80%; /* Aspect Ratio */

  & > div {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin-bottom: 0;
  }

  .canvas {
    width: 100%;
    height: 100%;
  }

  ::ng-deep svg {
    path.card-header, path.subcard-header, path.diagram-header {
      fill: nb-theme(text-basic-color);
    }

    path.card-subheader, path.subcard-subheader, path.diagram-subheader {
      fill: nb-theme(text-hint-color);
    }

    rect.card-background {
      fill: nb-theme(background-basic-color-2);
      stroke: nb-theme(border-basic-color-5);
    }

    rect.subcard-background {
      fill: nb-theme(background-basic-color-1);
    }

    path.subcard-border {
      fill: nb-theme(background-basic-color-2);
      stroke: nb-theme(border-basic-color-5);
    }
  }
}