//
// Copyright IBM Corp. 2020, 2020
//
// This source code is licensed under the Apache-2.0 license found in the
// LICENSE file in the root directory of this source tree.
//

@import '../../globals/scss/carbon-settings';
@import '../../globals/scss/variables';

@import '~carbon-components/scss/components/link/link';

$sm: 320px;
$md: 672px;
$lg: 1056px;
$xlg: 1312px;
$max: 1584px;

.#{$ide-prefix}-http-errors {
  width: 100%;
  min-width: $sm;
  max-width: $max;
  height: 100%;
}

.#{$ide-prefix}-http-errors-title {
  z-index: 1;
  margin-top: $layout-04;
  @include carbon--type-style('productive-heading-02');
  @media (min-width: $md) {
    margin-top: $layout-07;
  }
}

.#{$ide-prefix}-http-errors-description {
  z-index: 1;
  margin-top: $spacing-03;
  @include carbon--type-style('productive-heading-05');
  // sm
  @media (min-width: 0) and (max-width: $sm) {
    @include carbon--type-style('productive-heading-03');
  }
  // md
  @media (min-width: $sm + 1px) and (max-width: $md) {
    @include carbon--type-style('productive-heading-04');
  }
}

.#{$ide-prefix}-http-errors-details {
  z-index: 1;
  margin-top: $spacing-05;
  @include carbon--type-style('body-short-01');
}

.#{$ide-prefix}-http-errors-links {
  z-index: 1;
  margin-top: $spacing-06;
}
.#{$ide-prefix}-http-errors-links--link {
  margin-bottom: $spacing-03;
  @include carbon--type-style('body-short-01');
}

.#{$ide-prefix}-http-errors-image-container {
  position: fixed;
}
.#{$ide-prefix}-http-errors-image {
  width: carbon--mini-units(175);
  // stylelint-disable-next-line carbon/layout-token-use
  transform: translate(-35%, 6rem);
  @media (min-width: $max) {
    position: fixed;
    top: $layout-05;
    left: carbon--mini-units(17);
    transform: none;
  }
}
.#{$ide-prefix}-http-errors-inline-image {
  z-index: 1;
  width: carbon--mini-units(125);
  // sm
  @media (min-width: 0) and (max-width: $sm) {
    padding-top: $layout-05;
    margin-top: -$spacing-03;
    margin-left: -$spacing-05;
    @include carbon--type-style('body-short-01');
  }
  // md
  @media (min-width: $sm + 1px) and (max-width: $md) {
    padding-top: $layout-05;
    margin-top: -$spacing-03;
    margin-left: -$spacing-04;
  }
}