mat-card {
  cursor: pointer;
}

.overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;

  &:hover {
    background-color: rgba(0, 0, 0, 0.25);
  }
}

:host(.dashboard) {
  .main {
    @apply flex;

    .card {
      min-width: 300px;
      max-width: 350px;
    }
  }

  .stack-cards {
    padding-top: 0;

    &__item {
      transform: translateY(0) scale(1) !important;
      width: 100% !important;
    }
  }

  .action-button-group {
    display: none;
  }
}

.action-button-group {
  top: calc(100vh - 4rem);
  z-index: 1000;
}

.max-h-custom {
  max-height: calc(100vh - 16rem);
}

$max-stack-item: 3;

// Base styling for stack container
.stack-cards {
  position: relative;
  width: 100%;
  max-width: 500px;
  margin: 0 auto;
  transition: all 0.3s ease;
  display: flex;

  // The items within the stack
  &__item {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    border-radius: 8px;
    transition: all 0.3s ease;
    background-color: #fff;

    // Generate compact stacking effect
    @for $i from 1 through $max-stack-item {
      &:nth-child(#{$i}) {
        z-index: 11 - $i;
        transform: translateY(#{($max-stack-item + 1 - $i) * 5}px)
          scale(#{1 - ($i) * 0.075});
        transform-origin: center top;
        width: calc(100% - #{($i - 1) * 8}px);
      }
    }

    // First card (in front) styling
    &:first-child {
      position: relative;
      z-index: 10;
    }
  }

  // When mouse is over the entire stack
  &:hover {
    // Expand the stack slightly
    .stack-cards__item {
      @for $i from 1 through $max-stack-item {
        &:nth-child(#{$i}) {
          transform: translateY(#{($i - 1 - $max-stack-item) * 5}px)
            scale(#{1 - ($i - 1) * 0.075});
        }
      }
    }
  }

  // Individual card hover effect
  .stack-cards__item {
    // When hovering an individual card
    &:hover {
      cursor: pointer;
      z-index: 11;
      width: 100%;
      margin: 0;
      transform: scale(1) !important;
    }
  }
}

// Additional styling for the card component
.card {
  border-radius: 8px;
  overflow: hidden;
  min-height: 200px;
}

// Optional: Add some basic styling for the screenshot component
lib-screenshot {
  display: block;
  transition: all 0.3s ease;

  &[checked='true'] {
    outline: 2px solid #4a90e2;
  }
}
