//
// 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/tabs/tabs';
@import '~carbon-components/scss/components/button/button';

$ide-home-header-height: 25rem;
$ide-home-header-collapsed-height: 3rem;
$ide-home-card-height: 16rem;

.#{$ide-prefix}-home {
  height: 100%; /* use all height */
  background-color: $ui-01; /* use inverse background colour */
}

.#{$ide-prefix}-home-header {
  height: $ide-home-header-height;
  padding: 0 $spacing-06;
  margin: $spacing-03 0 $spacing-05 0;
  transition-duration: $duration--slow-02;
  transition-property: height;
  @include carbon--motion(standard, expressive);

  .#{$ide-prefix}-home-heading-container {
    display: flex;
    height: 100%; /* use all height in the container */
    flex-flow: row nowrap;
  }

  &.collapsed {
    height: $ide-home-header-collapsed-height;
  }
}

.#{$ide-prefix}-home-image-container {
  max-height: 100%;
}

.#{$ide-prefix}-home-table {
  position: relative;
  background-color: $ui-01;

  .#{$prefix}--row {
    margin-right: 0;
    margin-left: 0;
  }
}

.#{$ide-prefix}-home-image {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.#{$ide-prefix}-home-product-heading {
  @include carbon--type-style('productive-heading-03');

  margin-bottom: $spacing-02;
}

.#{$ide-prefix}-home-call-to-action {
  @include carbon--type-style('productive-heading-05');
}

// this class sets up height for all cards, and disabled carbon width and color changes
.#{$ide-prefix}-home-tile-layout,
.#{$ide-prefix}-home-tile-layout:hover {
  // stylelint-disable-next-line declaration-property-value-disallowed-list
  min-width: unset; /* no min width */
  height: $ide-home-card-height;
  min-height: $ide-home-card-height;
  color: inherit; /* no blue link color */
  text-decoration: none; /* no underline */
}

.#{$ide-prefix}-home-grid-gutter {
  max-width: 50%;
  flex: 1 0 50%;
  margin-bottom: $spacing-01;
  @media (min-width: 42rem) {
    max-width: 25%;
    flex: 1 0 25%;
  }
}

.#{$ide-prefix}-home-full-width,
.#{$ide-prefix}-home-tab-content {
  width: 100%;
  padding-top: $spacing-05;
}

.#{$ide-prefix}-home--section-title {
  width: 100%;
}

.#{$ide-prefix}-home-tab-content {
  padding: 0;
}

.#{$ide-prefix}-home-tab-content[hidden] {
  display: none;
}

.#{$ide-prefix}-home-tile {
  display: flex;
  height: 100%; /* use all height in the container */
  flex-flow: column nowrap;
  justify-content: space-between;
}

.#{$ide-prefix}-home-tile-img {
  width: 2rem;
  height: 2rem;
}

.#{$ide-prefix}-home-tile-heading {
  @include carbon--type-style('productive-heading-03');

  margin-bottom: $spacing-02;
}

.#{$ide-prefix}-home-tile-subtext {
  @include carbon--type-style('body-short-01');
}

.#{$ide-prefix}-home-header-toggle-container {
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
  white-space: nowrap;
}