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

/**
 * Welcome - Welcome dashboard layout styles
 *
 * Note: Uses $size-* tokens for spacing and design tokens for colors.
 *
 * Intentionally hardcoded values:
 * - Flex basis/min-width (120px, 230px): Card size breakpoints
 * - Percentages (33.33333%, 25%, 14.28571429%): Fractional grid layout
 * - Min-height (130px): Help card height
 * - Font-size (85%): Relative typography
 * - Negative margin -15px (off-grid): Fine-tuning
 * - Margin-bottom 27px (off-grid): Specific spacing
 */

c8y-dashboard-gridstack.welcome {
  .grid-stack {
    height: auto !important;
  }

  .grid-stack-item.ui-draggable-disabled:not(.grid-floater) {
    position: relative;
    top: inherit;
    height: auto;

    .grid-stack-item-content {
      position: static;

      .card-header-actions:after {
        display: none;
      }

      .card-inner-scroll {
        overflow: visible;
        height: auto;

        &:before,
        &:after {
          display: none;
        }

        > * {
          margin-bottom: 0;
        }

        .card-group-block > .card {
          border-radius: 0;
          background-color: $component-background-default;
        }

        .quicklinks > .card {
          flex: 1 0 120px;
          min-width: 120px;

          @media (min-width: $screen-sm-min) {
            flex: 1 0 230px;
            min-width: 230px;
          }

          .card-block {
            width: 100%;
          }
        }
      }
    }
  }

  .grid-floater {
    iframe:not(.twitter-timeline) {
      width: 100% !important;
      height: 100% !important;
    }

    .grid-stack-item-content {
      margin: 0 0 0 $size-16 !important;
    }
  }

  @media (max-width: $screen-xs-max) {
    .grid-floater.ui-draggable-disabled {
      display: none;
    }
  }
}

[ng-controller='HelpAndSupportCtrl'] {
  display: flex;
  flex-flow: row wrap;

  > .card {
    flex: 0 0 33.33333%;

    @media (min-width: $screen-sm-min) {
      flex: 0 0 25%;
    }

    @media (min-width: $screen-md-min) {
      flex: 1 0 14.28571429%;
    }
  }
}

a.help-and-support-doc {
  width: 100%;
  min-height: 130px;
  padding-bottom: 100%;

  > div {
    justify-content: flex-start;
    padding: $size-20 $size-10 0;

    img {
      margin-bottom: $size-10;
      max-width: $size-24;
      max-height: $size-24;
    }

    p {
      color: var(--brand-primary, var(--c8y-brand-primary));
      font-size: 85%;
    }
  }
}

.welcome-dont-show {
  margin-top: -15px;
  padding: $size-5 0;

  @media (min-width: $screen-sm-min) {
    margin-top: calc(-1 * $size-24);
    margin-bottom: 27px;
  }

  @media (min-width: $grid-float-breakpoint) {
    padding: $size-5 $size-16;
  }
}