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

@use "../mixins/tab-focus";

/**
 * Welcome Widget - Interactive welcome screen widget
 *
 * Note: Uses $size-8 for spacing. Uses color tokens and z-index variables.
 *
 * Intentionally hardcoded values:
 * - Border/outline widths (1px, 2px): Standard border sizes
 * - Outline-offset (-2px): Inset positioning
 * - Transition durations (0.25s): Animation timing
 */

.welcome-widget {
  height: 100%;
  .welcome-illustration {
    position: relative;
    flex-grow: 1;
    height: auto;
    > svg {
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
    }
  }
  > .flex-row {
    height: 100%;
  }
  .card-group.interact-grid {
    margin-bottom: 0;

    .card {
      margin-top: 1px;
      margin-bottom: $size-8;
      cursor: pointer;
      outline: 1px solid $component-border-color;
      transition: transform 0.25s ease-in-out, box-shadow 0.25s ease-in-out;


      &:hover,
      &:focus {
        z-index: $zindex-navbar - 1;
        outline: 2px solid $component-brand-primary;
        outline-offset: -2px;
      }

      &:focus {
        @include tab-focus.c8y-focus();
      }
    }
  }
}

@media (min-width: $screen-md-min) {
  .welcome-widget {
    padding-top: 0;
  }
}

body:not(:has(.c8y-logo)) {
  #c8y-mark {
    display: none;
  }
}