@import 'i-chatbot';

html, body {
  height: 100%;
}

#demo {
  height: 100%;
  min-height: 100%;
}

.Container {
  width: 100%;
  height: 100%;
  min-height: 100%;

  .Content {
    margin: 0 auto;
    max-width: 800px;
    padding: 1em;
    position: absolute;

    .absolute(1em);

    .xs({ .absolute(0.5em); padding: 0.5em; });
    .sm({ width: 80% });
    .md({ width: 60% });
    .lg({ width: 50% });
  }
}

.Demo {
  .Extra-Actions {
    .absolute(auto, 1em, 1em);

    height: 2em;

    button {
      background-color: lightblue;
      border: none;
      border-radius: 6px;
      outline: none;
      padding: 0.5em 1em;
    }
  }
}

.xs (@content) {
  @media (max-width: 767px) { @content();
  }
}

.sm (@content) {
  @media (min-width: 768px) and (max-width: 991px) { @content();
  }
}

.md (@content) {
  @media (min-width: 992px) and (max-width: 1199px) { @content();
  }
}

.lg (@content) {
  @media (min-width: 1200px) { @content();
  }
}

.absolute (@distance) {
  position: absolute;
  left: @distance;
  right: @distance;
  bottom: @distance;
  top: @distance;
}

.absolute(@top, @bottom, @horizontal) {
  position: absolute;
  left: @horizontal;
  right: @horizontal;
  bottom: @bottom;
  top: @top;
}
