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

@include nb-install-component() {
  :host {
    display: block;
    align-items: center;
    width: 100%;
    height: 100%;
  }

  svg {
    display:block;
    width: 100%;
    height: 80%;
  }

  .stroke-pattern {
    fill: none;
    stroke: #a1a1e5;
    stroke-miterlimit: 10;
    opacity: 0.1;
    stroke-width: 1px;
  }

  .stroked-element {
    stroke-width: 4px;
    stroke: #a1a1e5;
    stroke-miterlimit: 10;
    fill: url('#New_Pattern_Swatch_1');
  }

  .room-border {
    stroke-width: 4px;
    stroke: #a1a1e5;
    stroke-miterlimit: 10;
    fill: none;
    transition: stroke 0.4s ease-out;
  }

  .room-bg {
    fill: transparent;
    stroke: transparent;
    cursor: pointer;
    transition: fill 0.4s ease-out;
    stroke-width: 4px;
  }

  .room-bg-border-grad {
    fill: none;
    stroke: none;
    stroke-width: 4px;
  }

  .room-text {
    cursor: pointer;
    user-select: none;
    fill: #fff;
  }

  .selected-room {
    z-index: 40;
    .room-bg {
      //stroke: rgba(0, 255, 170, 1);
      fill: rgba(0, 255, 170, 0.2);
      filter: url('#f2');
    }

    .room-bg-border-grad {
      stroke: rgba(0, 255, 170, 1);
      filter: url('#f2');
    }
    .room-border {
      stroke: #00f9a6;
    }
    .room-border-glow {
      filter: url('#f2');
    }
  }

    // TODO: Replace with the card header styles mixin
  .rooms-card-header {
    line-height: 2rem;
    font-size: 1.25rem;
    font-family: nb-theme(font-secondary);
    font-weight: nb-theme(font-weight-bolder);
    color: nb-theme(color-fg-heading);
    padding: 1.25rem;
  }
}