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

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

  nb-card-body {
    padding: 0;
  }

  nb-card-footer {
    padding: 1rem 0;
    border: none;
  }

  .cameras-card-header {
    display: flex;

    .cameras-card-title {
      flex: 1;
      padding: 1.25rem;
    }
  }

  .cameras-filter {
    display: flex;

    a {
      font-size: 2rem;
      padding: 0.75rem 1.5rem;
      display: flex;
      flex-direction: column;
      justify-content: center;
      color: nb-theme(color-fg);
    }

    a:first-child {
      border-left: 1px solid nb-theme(separator);
    }

    a:last-child {
      border-top-right-radius: nb-theme(card-border-radius);
    }

    a.active {
      background-color: nb-theme(color-bg-active);
      color: nb-theme(color-fg-highlight);
      text-shadow: 0 0 12px rgba(nb-theme(color-fg-highlight), 0.4);
      border: none;
    }
  }

  .cameras {
    display: flex;
    flex-wrap: wrap;
    height: 100%;

    .camera {
      position: relative;
      background-position: center;
      background-size: cover;
      height: 50%;
      width: 50%;

      span {
        position: absolute;
        bottom: 0;
        width: 100%;
        color: white;
        background: rgba(88, 73, 184, 0.5);
        font-size: 1rem;
        padding: 0.5rem 1rem;
      }
    }

    .camera::before {
      background-color: black;
      content: '';
      position: absolute;
      width: 100%;
      height: 100%;
      opacity: 0.2;
      transition: 0.1s;
    }

    .camera:hover::before {
      opacity: 0;
    }
  }

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

      &::before {
        height: 100%;
      }
    }
  }

  nb-action {
    i {
      color: nb-theme(color-fg);
      font-size: 2.5rem;
      margin-right: 1rem;
    }

    span {
      font-family: nb-theme(font-family-secondary);
      font-weight: nb-theme(font-weight-bold);
      color: nb-theme(color-fg-heading);
      text-transform: uppercase;
    }
  }
}