@import '../../../@theme/styles/themes';
@import '~@nebular/theme/styles/global/breakpoints';
@import '~bootstrap/scss/mixins/breakpoints';

@include nb-install-component() {

  nb-card-header {
    display: flex;
    align-items: center;
    padding-top: 0.625rem;
    padding-bottom: 0.625rem;
  }

  .single-view-button {
    .nb-square {
      font-size: 1.25rem;
    }

    @include nb-ltr {
      margin-left: auto;
      border-top-right-radius: 0;
      border-bottom-right-radius: 0;
    }
    @include nb-rtl {
      margin-right: auto;
      border-top-left-radius: 0;
      border-bottom-left-radius: 0;
    }
  }

  .grid-view-button {
    ::ng-deep svg {
      vertical-align: top;
    }

    @include nb-ltr {
      border-top-left-radius: 0;
      border-bottom-left-radius: 0;
    }
    @include nb-rtl {
      border-top-right-radius: 0;
      border-bottom-right-radius: 0;
    }
  }

  .grid-container {
    height: 100%;
    display: flex;
  }

  .single-view,
  .grid-view {
    flex: 1 0 100%;
  }

  .grid-view {
    display: flex;
    flex-wrap: wrap;

    .camera {
      flex: 1 0 50%;
    }
  }

  .single-view .camera {
    width: 100%;
    height: 100%;
  }

  .camera {
    background-position: center;
    background-size: cover;
    position: relative;

    &::before {
      background-color: rgba(255, 255, 255, 0.1);
      content: '';
      position: absolute;
      width: 100%;
      height: 100%;
      opacity: 1;
    }

    &:hover::before {
      opacity: 0;
    }
  }

  .camera-name {
    position: absolute;
    bottom: 0;
    width: 100%;
    color: white;
    background: nb-theme(overlay-backdrop-background-color);
    padding: 0.5rem 1rem;
  }

  nb-action {
    nb-icon {
      @include nb-ltr(margin-right, 0.5rem);
      @include nb-rtl(margin-left, 0.5rem);
    }

    ::ng-deep svg {
      vertical-align: top;
    }
  }

  @include media-breakpoint-down(xl) {
    nb-action {
      padding: 0;
    }
  }
}