@import '../../../../@theme/styles/themes';
@import '~@nebular/theme/components/card/card.component.theme';

@include nb-install-component() {

  svg {
    width: 100%;
  }

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

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

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

  .room-bg {
    fill: nb-theme(card-bg);
    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: nb-theme(color-fg);
  }

  .selected-room {
    z-index: 40;

    .room-text {
      fill: nb-theme(color-fg-heading);
      font-weight: nb-theme(font-weight-bolder);
    }
    .room-border {
      stroke: nb-theme(color-success);
    }
  }

  .header {
    @include nb-card-header();
    border-bottom: none;
    padding-bottom: 0;
  }

  @include nb-for-theme(cosmic) {
    .stroke-pattern, .stroked-element, .room-border {
      stroke: #a1a1e5;
    }

    .room-text {
      fill: nb-theme(color-fg-heading);
    }

    .selected-room {
      .room-text {
        font-weight: nb-theme(font-weight-normal);
      }
      .room-bg {
        fill: rgba(0, 255, 170, 0.2);
        filter: url('#f2');
      }
      .room-border {
        stroke: #00f9a6;
      }
      .room-border-glow {
        filter: url('#f2');
      }
    }
  }
}