@use "../../../../variables/index" as *;

/**
 * C8Y Empty State - Empty state component for lists and containers
 *
 * Note: Uses $size-* tokens for spacing, $size-base for calculations, and $component-padding.
 *
 * Intentionally hardcoded values:
 * - Component-specific dimensions (600px, 280px, 45px): Max widths and flex basis
 * - Typography sizes (30px, 90px): Large icon font sizes
 * - Opacity values (0.6): Visual effects
 * - Percentages (100%): Layout
 * - Rem values (8rem, 4rem): Responsive padding using rem units
 */

.c8y-empty-state {
  margin: 0 auto;
  max-width: 600px;
  width: 100%;
  color: $component-color-text-muted;
  text-align: center;
  > .c8y-icon,
  > [class^='dlt-c8y-icon-'],
  > [class*=' dlt-c8y-icon-'] {
    margin-bottom: $size-base;
    color: $component-color-text-muted;
    font-size: 90px;
    opacity: 0.6;
    .dashboard.dashboard-theme-dark & {
      color: $component-background-default;
    }
    .dashboard.dashboard-theme-branded & {
      color: $component-background-default;
    }
  }
  .btn-link {
    @extend .btn-primary !optional;
  }

  p, .btn{
    margin-bottom: $size-base;
  }

  .dashboard.dashboard-theme-branded & {
    .btn-primary {
      @extend .btn-default !optional;
    }
    a {
      color: $component-color-default;
      text-decoration: underline;
    }
  }

  &.empty-list {
    display: flex;
    flex-flow: row nowrap;
    text-align: left;
    > .c8y-icon,
    > [class^='dlt-c8y-icon-'],
    > [class*=' dlt-c8y-icon-'] {
      flex: 0 0 auto;
      margin-right: $size-5;
      color: $component-color-text-muted;
      font-size: 30px;
    }
    p {
      align-self: center;
      flex: 1 1 auto;
      margin-bottom: 0;
      color: $component-color-text-muted;
    }
  }
  &--horizontal {
    display: flex;
    flex-flow: row nowrap;
    margin: 0;
    padding: $size-base;
    max-width: 100%;
    text-align: left !important;
    > .c8y-icon,
    > [class^='dlt-c8y-icon-'],
    > [class*=' dlt-c8y-icon-'] {
      flex: 0 0 auto;
      margin-right: $size-4;
      margin-bottom: 0;
      font-size: 30px;
    }
    h3 {
      align-self: center;
      font-size: inherit;
    }
    p {
      align-self: center;
      flex: 0 1 auto;
      margin-bottom: 0;
      color: $component-color-text-muted;
    }
  }
  .card-block .c8y-empty-state {
    padding: $size-base 0;
  }
}

.panel,
.card,
.c8y-nav-stacked,
.c8y-list__item,
td,
.modal-content,
.smart-rest-editor {
  .c8y-empty-state {
    display: flex;
    flex-flow: row nowrap;
    margin-left: 0;
    padding: $size-base;
    text-align: left !important;
    > .c8y-icon,
    > [class^='dlt-c8y-icon-'],
    > [class*=' dlt-c8y-icon-'] {
      flex: 0 0 45px;
      margin-right: $size-5;
      margin-bottom: 0;
      font-size: 30px;
    }
    h3 {
      align-self: center;
      margin-right: $size-5;
      font-weight: bold;
      font-size: inherit;
    }
    p {
      align-self: center;
      flex: 0 1 auto;
      margin-bottom: 0;
      color: $component-color-text-muted;
    }
  }
  .card-block .c8y-empty-state {
    padding: $size-base 0;
  }
}

.c8y-nav-stacked,
.smart-rest-editor {
  .c8y-empty-state {
    padding: 0;
  }
}

.no-results {
  padding-top: $component-padding;
  text-align: center;
  .c8y-empty-state {
    display: inline-block;
    max-width: 280px;
    text-align: center !important;
  }
}

@media (max-width: $screen-xs) {
  .c8y-empty-state:not(.c8y-empty-state--horizontal) {
    padding: 8rem 4rem;
  }
}