@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-heading);
      border: none;
    }
  }

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

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

      &::before {
        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(0, 0, 0, 0.4);
      font-family: nb-theme(font-family-secondary);
      font-size: 1rem;
      font-weight: nb-theme(font-weight-bold);
      padding: 0.5rem 1rem;
    }

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

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

  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;
    }
  }

  @include nb-for-theme(cosmic) {
    .cameras-filter a.active {
      color: nb-theme(color-fg-highlight);
      text-shadow: 0 0 12px rgba(nb-theme(color-fg-highlight), 0.4);
    }

    .camera {
      span {
        background: rgba(88, 73, 184, 0.5);
      }

      &::before {
        background-color: rgba(0, 0, 0, 0.2);
      }
    }
  }
}