/*
 * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
 * or more contributor license agreements. Licensed under the Elastic License
 * 2.0; you may not use this file except in compliance with the Elastic License
 * 2.0.
 */

/**
 * Setup Guide
 */
.setupGuide {
  padding: 0;
  min-height: 100vh;

  &__sidebar {
    flex-basis: $euiSizeXXL * 7.5;
    flex-shrink: 0;
    padding: $euiSizeL;
    margin-right: 0;

    background-color: $euiColorLightestShade;
    border-color: $euiBorderColor;
    border-style: solid;
    border-width: 0 0 $euiBorderWidthThin 0; // bottom - mobile view

    @include euiBreakpoint('m', 'l', 'xl') {
      border-width: 0 $euiBorderWidthThin 0 0; // right - desktop view
    }
    @include euiBreakpoint('m', 'l') {
      flex-basis: $euiSizeXXL * 10;
    }
    @include euiBreakpoint('xl') {
      flex-basis: $euiSizeXXL * 12.5;
    }
  }

  &__body {
    align-self: start;
    padding: $euiSizeL;

    @include euiBreakpoint('l') {
      padding: $euiSizeXXL ($euiSizeXXL * 1.25);
    }
  }

  &__thumbnail {
    display: block;
    max-width: 100%;
    height: auto;
    margin: $euiSizeL auto;
  }
}