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

.#{$ide-prefix}-create-header {
  padding-bottom: $spacing-05;
  // stylelint-disable-next-line carbon/motion-easing-use
  transition: all $duration--moderate-02;

  &.fixed {
    position: fixed;
    z-index: 10;
    width: 100%;
    padding-bottom: 0;
    background-color: $ui-01;
    box-shadow: inset 0 -1px 0 $ui-03;
    // stylelint-disable-next-line carbon/motion-easing-use
    transition: all $duration--moderate-02;

    @media (prefers-reduced-motion: reduce) {
      transition: none;
    }

    .#{$ide-prefix}-create-breadcrumb {
      display: none;
    }

    .#{$ide-prefix}-create-heading {
      display: inline-block;
    }

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

      // stylelint-disable-next-line carbon/motion-easing-use
      transition: all $duration--moderate-02;
    }

    .#{$ide-prefix}-create-title {
      align-items: center;
    }

    .#{$ide-prefix}-create-form-subtitle {
      display: inline-block;
      max-width: 100%;
      padding-bottom: $spacing-03;
      color: $text-02;
      // stylelint-disable-next-line carbon/motion-easing-use
      transition: all $duration--moderate-02;
      @include carbon--type-style('body-short-01');
    }

    .#{$ide-prefix}-create-form-subtitle-content {
      display: flex;
      height: $layout-01;
      align-items: center;
      padding: $spacing-03;
      border-left: 1px solid $text-02;
      animation: reveal $duration--moderate-02 $duration--moderate-01;
      animation-fill-mode: both;
    }

    .#{$prefix}--grid,
    .#{$prefix}--col {
      padding-right: 0;
      // stylelint-disable-next-line carbon/motion-easing-use
      transition: all $duration--moderate-02;
    }

    .#{$prefix}--row {
      margin-right: 0;
      // stylelint-disable-next-line carbon/motion-easing-use
      transition: all $duration--moderate-02;
    }

    .#{$ide-prefix}-create-buttons {
      margin: auto;
    }

    .#{$ide-prefix}-create-buttons :not(:only-child()) {
      margin-left: 0;
    }
  }
}

@keyframes reveal {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

.#{$ide-prefix}-create-title {
  display: flex;
  align-items: flex-start;
}

.#{$ide-prefix}-create-title-box {
  flex: 1;
}

.#{$ide-prefix}-create-heading-heading {
  margin-right: $spacing-03;
  // stylelint-disable-next-line carbon/motion-easing-use
  transition: all $duration--moderate-02;
  @include carbon--type-style('productive-heading-05');
}

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

  max-width: 70%;
  word-break: break-word;
}

.#{$ide-prefix}-create-breadcrumb {
  height: $layout-04;
  align-content: flex-end;
  margin-bottom: $spacing-03;

  a {
    max-width: max-content;
  }
}

.#{$ide-prefix}-create-buttons {
  :not(:only-child()) {
    margin-left: $spacing-03;
  }
}

@include carbon--breakpoint-down(672px) {
  .#{$ide-prefix}-create-buttons {
    position: fixed;
    z-index: 10;
    right: 0;
    bottom: 0;
    width: 100%;
    background-color: $ui-01;
    box-shadow: inset 0 1px 0 $ui-03;

    :not(:only-child()) {
      margin-left: 0;
    }
  }

  .#{$ide-prefix}-create-content {
    margin-bottom: $layout-04;
  }
}

.#{$ide-prefix}-create-button-box {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
}

.#{$ide-prefix}-create-cancel-btn {
  width: carbon--mini-units(30);
  margin-right: $spacing-03;
}

.#{$ide-prefix}-create-next-btn {
  display: flex;
  width: carbon--mini-units(30);
}

.#{$ide-prefix}-create-progress-container {
  padding: $spacing-05;
}