//
// Copyright IBM Corp. 2016, 2018
//
// 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/vars';
@import '../../globals/scss/typography';
@import '../../globals/scss/helper-mixins';
@import '../../globals/scss/vendor/@carbon/elements/scss/import-once/import-once';
@import '../../globals/scss/css--reset';
@import 'mixins';

@mixin snippet {
  .#{$prefix}--snippet code {
    font-family: $font-family-mono;
  }

  // Inline Code Snippet
  .#{$prefix}--snippet--inline {
    @include reset;
    position: relative;
    display: inline;
    padding: 0;
    background: transparent;
    font-size: inherit;
    border: 1px solid transparent;
    border-radius: 4px;
    background-color: $field-01;
    color: $text-01;
    font-size: 85%;
    cursor: pointer;

    &:hover {
      background-color: darken($field-01, 10%);
    }

    &:focus {
      @include focus-outline;
      outline: none;
      border: 1px solid $brand-01;
    }
  }

  .#{$prefix}--snippet--inline code {
    padding: rem(1px) $spacing-xs;
  }

  .#{$prefix}--snippet--inline.#{$prefix}--snippet--light {
    background-color: $field-02;

    &:hover {
      background-color: rgba($brand-02, 0.1);
    }
  }

  // Single Line Snippet
  .#{$prefix}--snippet--single {
    @include bx--snippet;
    height: rem(56px);
    padding: 0 $spacing-2xl 0 $spacing-md;
  }

  .#{$prefix}--snippet--single .#{$prefix}--snippet-container {
    display: flex;
    align-items: center;
    height: 130%;
    overflow-x: scroll;
    position: relative;
    padding-bottom: $spacing-md;
  }

  .#{$prefix}--snippet--single pre {
    white-space: nowrap;
  }

  // Multi Line Snippet
  .#{$prefix}--snippet--multi {
    @include bx--snippet;
    padding: $spacing-md $spacing-3xl $spacing-xl $spacing-lg;
  }

  .#{$prefix}--snippet--multi .#{$prefix}--snippet-container {
    overflow: hidden;
    position: relative;
    max-height: rem(238px);
    min-height: rem(56px);
    transition: all $transition--base $carbon--standard-easing;
  }

  .#{$prefix}--snippet--expand.#{$prefix}--snippet--multi .#{$prefix}--snippet-container {
    max-height: rem(1500px);
  }

  .#{$prefix}--snippet--multi .#{$prefix}--snippet-container pre {
    white-space: pre-wrap;
  }

  .#{$prefix}--snippet__icon {
    fill: $brand-01;
    height: rem(24px);
    width: rem(18px);
    transition: all $transition--base $carbon--standard-easing;

    &:hover {
      fill: $hover-primary;
    }
  }

  .#{$prefix}--snippet-button {
    @include reset;
    cursor: pointer;
    position: absolute;
    top: 0.675rem;
    right: 0.5rem;
    border: none;
    background-color: transparent;
    outline: none;
    padding: 0;
    height: rem(32px);
    width: rem(32px);
    overflow: visible;

    &:focus {
      @include focus-outline('border');
    }
  }

  .#{$prefix}--snippet .#{$prefix}--btn--copy__feedback {
    @include font-family;
    z-index: z('overlay');
    font-weight: 400;
    left: inherit;
    top: 0.75rem;
    right: 1.25rem;
  }

  // Skeleton State
  .#{$prefix}--snippet--code.#{$prefix}--skeleton {
    height: rem(98px);
  }

  .#{$prefix}--snippet--terminal.#{$prefix}--skeleton {
    height: rem(56px);
  }

  .#{$prefix}--snippet.#{$prefix}--skeleton .#{$prefix}--snippet-container {
    height: 100%;
  }

  .#{$prefix}--snippet.#{$prefix}--skeleton code {
    @include skeleton;
    width: 100%;
    height: 1rem;
    display: block;
  }

  .#{$prefix}--snippet-button .#{$prefix}--btn--copy__feedback {
    top: rem(25px);
    left: 1rem;
    right: auto;
  }

  .#{$prefix}--snippet--inline .#{$prefix}--btn--copy__feedback {
    right: auto;
    left: 50%;
  }

  // Show more / less button
  .#{$prefix}--snippet-btn--expand {
    position: absolute;
    right: 0;
    bottom: 0;
  }

  .#{$prefix}--snippet-btn--expand--hide .#{$prefix}--snippet-btn--expand {
    display: none;
  }

  .#{$prefix}--snippet-btn--expand .#{$prefix}--icon-chevron--down {
    fill: $brand-01;
    margin-left: $spacing-2xs;
    transform: rotate(0deg);
    transition: $transition--base;
  }

  .#{$prefix}--snippet-btn--expand:hover .#{$prefix}--icon-chevron--down,
  .#{$prefix}--snippet-btn--expand:focus .#{$prefix}--icon-chevron--down {
    fill: $inverse-01;
  }

  .#{$prefix}--snippet--expand .#{$prefix}--snippet-btn--expand .#{$prefix}--icon-chevron--down {
    transform: rotate(180deg);
  }

  // Skeleton

  #{$prefix}--snippet--multi.#{$prefix}--skeleton {
    height: rem(98px);
  }

  .#{$prefix}--snippet--single.#{$prefix}--skeleton {
    height: rem(56px);
  }

  .#{$prefix}--snippet.#{$prefix}--skeleton .#{$prefix}--snippet-container {
    height: 100%;
  }

  .#{$prefix}--snippet.#{$prefix}--skeleton span {
    @include skeleton;
    width: 100%;
    height: 1rem;
    display: block;
    margin-top: 0.5rem;

    &:first-child {
      margin: 0;
    }

    &:nth-child(2) {
      width: 85%;
    }

    &:nth-child(3) {
      width: 95%;
    }
  }

  .#{$prefix}--snippet--single.#{$prefix}--skeleton .#{$prefix}--snippet-container {
    padding-bottom: 0;
  }

  /*
    Deprecated class names will be removed in v10.x
  */

  .#{$prefix}--snippet--terminal {
    @include bx--snippet;
    height: rem(56px);
    padding: 0 $spacing-2xl 0 $spacing-md;
  }

  .#{$prefix}--snippet--terminal .#{$prefix}--snippet-container {
    display: flex;
    align-items: center;
    height: 130%;
    white-space: nowrap;
    overflow-x: scroll;
    position: relative;
    padding-bottom: $spacing-md;
  }

  .#{$prefix}--snippet--code {
    @include bx--snippet;
    padding: $spacing-md $spacing-3xl $spacing-md $spacing-lg;
  }

  .#{$prefix}--snippet--code .#{$prefix}--snippet-container {
    overflow: hidden;
    position: relative;
    max-height: rem(254px);
    min-height: rem(56px);
    transition: all $transition--base $carbon--standard-easing;
  }

  .#{$prefix}--snippet--expand.#{$prefix}--snippet--code .#{$prefix}--snippet-container {
    max-height: rem(1500px);
  }

  .#{$prefix}--snippet--code .#{$prefix}--snippet-container pre {
    white-space: pre-wrap;
  }

  .#{$prefix}--snippet--inline .#{$prefix}--btn--copy__feedback {
    right: auto;
  }

  // Skeleton State
  .#{$prefix}--snippet--code.#{$prefix}--skeleton {
    height: rem(98px);
  }

  .#{$prefix}--snippet--terminal.#{$prefix}--skeleton {
    height: rem(56px);
  }

  .#{$prefix}--snippet.#{$prefix}--skeleton .#{$prefix}--snippet-container {
    height: 100%;
  }

  .#{$prefix}--snippet.#{$prefix}--skeleton code {
    @include skeleton;
    width: 100%;
    height: 1rem;
    display: block;
  }
}

@mixin snippet--x {
  .#{$prefix}--snippet code {
    @include type-style('code-01');
  }

  // Inline Code Snippet
  .#{$prefix}--snippet--inline {
    @include reset;
    // Note: originally this inline snippet inherited font-size, we might need
    // a more flexible strategy than explicitly setting font-size with this
    // type style
    @include type-style('code-01');

    position: relative;
    display: inline;
    padding: 0;
    border: 2px solid transparent;
    border-radius: 4px;
    background-color: $ui-01;
    color: $text-01;
    cursor: pointer;

    &:hover {
      background-color: $ui-03;
    }

    &:active {
      background-color: $copy-active;
    }

    &:focus {
      outline: none;
      border: 2px solid $interactive-01;
    }
  }

  .#{$prefix}--snippet--inline code {
    padding: 0 $spacing-xs;
  }

  .#{$prefix}--snippet--inline.#{$prefix}--snippet--light {
    background-color: $field-02;

    &:hover {
      background-color: rgba($interactive-02, 0.1);
    }
  }

  // Single Line Snippet
  .#{$prefix}--snippet--single {
    @include bx--snippet--x;
    border: none;
    max-width: rem(760px);
    min-width: rem(320px);
    height: $carbon--spacing-08;
    padding: 0 56px 0 $carbon--spacing-05;
  }

  .#{$prefix}--snippet--single .#{$prefix}--snippet-container {
    display: flex;
    align-items: center;
    overflow-x: scroll;
    position: relative;
    padding: 0 0 $carbon--spacing-05 0;
    height: rem(56px);
  }

  .#{$prefix}--snippet--single pre {
    white-space: nowrap;
    @include type-style('code-01');
    padding-right: $spacing-xs;
  }

  .#{$prefix}--snippet--single::after {
    width: rem(16px);
    height: 100%;
    content: '';
    position: absolute;
    top: 0;
    right: rem(56px);
    background-image: linear-gradient(to right, rgba(243, 243, 243, 0), rgba(243, 243, 243, 1));
  }

  // Multi Line Snippet
  .#{$prefix}--snippet--multi {
    @include bx--snippet--x;
    border: none;
    padding: $carbon--spacing-05;
    min-width: rem(320px);
    max-width: 100%;
  }

  //closed snippet container
  .#{$prefix}--snippet--multi .#{$prefix}--snippet-container {
    overflow: hidden;
    position: relative;
    max-height: rem(238px);
    min-height: rem(56px);
    transition: max-height $duration--moderate-01 motion(standard, productive);
  }

  // expanded snippet container
  .#{$prefix}--snippet--multi.#{$prefix}--snippet--expand .#{$prefix}--snippet-container {
    max-height: rem(1500px);
    transition: max-height $duration--moderate-01 motion(standard, productive);
  }

  // closed pre
  .#{$prefix}--snippet--multi .#{$prefix}--snippet-container pre {
    overflow: hidden;
    padding-bottom: rem(24px);
  }

  // expanded pre
  .#{$prefix}--snippet--multi.#{$prefix}--snippet--expand .#{$prefix}--snippet-container pre {
    overflow-x: scroll;
  }

  .#{$prefix}--snippet--multi .#{$prefix}--snippet-container pre::after {
    width: rem(16px);
    height: 100%;
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    background-image: linear-gradient(to right, rgba(243, 243, 243, 0), rgba(243, 243, 243, 1));
  }

  .#{$prefix}--snippet--multi .#{$prefix}--snippet-container pre code {
    overflow: hidden;
  }

  //Copy Button
  .#{$prefix}--snippet__icon {
    fill: $icon-01;
    height: rem(16px);
    width: rem(16px);
    transition: all $duration--fast-01 motion(standard, productive);
  }

  .#{$prefix}--snippet-button {
    @include reset;
    cursor: pointer;
    position: absolute;
    top: 0;
    right: 0;
    border: none;
    background-color: $ui-01;
    outline: none;
    padding: 0;
    height: $carbon--spacing-08;
    width: $carbon--spacing-08;
    overflow: visible;

    &:focus {
      @include focus-outline('outline');
      outline-color: $focus;
    }
  }

  .#{$prefix}--snippet--multi .#{$prefix}--snippet-button {
    height: $carbon--spacing-07;
    width: $carbon--spacing-07;
    top: $spacing-xs;
    right: $spacing-xs;
  }

  .#{$prefix}--snippet-button:hover {
    background: $hover-ui;
  }

  .#{$prefix}--snippet-button:active {
    background-color: $copy-active;
  }

  .#{$prefix}--btn--copy__feedback {
    @include type-style('body-short-01');
    z-index: z('overlay');
    font-weight: 400;
    left: inherit;
    top: 0.75rem;
    right: 1.25rem;
  }

  .#{$prefix}--btn--copy__feedback:before,
  .#{$prefix}--btn--copy__feedback:after {
    background: $copy-btn-feedback;
  }

  .#{$prefix}--btn--copy__feedback:after {
    border: none;
  }

  // Show more / less button
  button.#{$prefix}--btn.#{$prefix}--snippet-btn--expand {
    display: inline-flex;
    align-items: center;
    position: absolute;
    right: $spacing-xs;
    bottom: $spacing-xs;
    padding: $spacing-xs;
    padding-left: $carbon--spacing-05;
    color: $text-01;
    background-color: $field-01;
  }

  button.#{$prefix}--btn.#{$prefix}--snippet-btn--expand .#{$prefix}--snippet-btn--text {
    position: relative;
    top: rem(-1px);
  }

  .#{$prefix}--snippet-btn--expand--hide.#{$prefix}--snippet-btn--expand {
    display: none;
  }

  .#{$prefix}--snippet-btn--expand .#{$prefix}--icon-chevron--down {
    fill: $text-01;
    margin-left: $spacing-xs;
    margin-bottom: rem(1px);
    transform: rotate(0deg);
    transition: $duration--moderate-01 motion(standard, productive);
  }

  button.#{$prefix}--btn.#{$prefix}--snippet-btn--expand:hover {
    background: $hover-ui;
    color: $text-01;
  }

  .#{$prefix}--snippet-btn--expand:active {
    background-color: $copy-active;
  }

  .#{$prefix}--snippet-btn--expand:focus {
    @include focus-outline('outline');
  }

  .#{$prefix}--snippet--expand .#{$prefix}--snippet-btn--expand .#{$prefix}--icon-chevron--down {
    transform: rotate(180deg);
    transition: transform $transition--expansion;
  }

  // Skeleton State
  .#{$prefix}--snippet--code.#{$prefix}--skeleton {
    height: rem(98px);
  }

  .#{$prefix}--snippet--terminal.#{$prefix}--skeleton {
    height: rem(56px);
  }

  .#{$prefix}--snippet.#{$prefix}--skeleton .#{$prefix}--snippet-container {
    height: 100%;
  }

  .#{$prefix}--snippet.#{$prefix}--skeleton code {
    @include skeleton;
    width: 100%;
    height: 1rem;
    display: block;
  }

  .#{$prefix}--snippet-button .#{$prefix}--btn--copy__feedback {
    top: rem(25px);
    left: 1rem;
    right: auto;
  }

  .#{$prefix}--snippet--inline .#{$prefix}--btn--copy__feedback {
    right: auto;
    left: 50%;
  }

  #{$prefix}--snippet--multi.#{$prefix}--skeleton {
    height: rem(98px);
  }

  .#{$prefix}--snippet--single.#{$prefix}--skeleton {
    height: rem(56px);
  }

  .#{$prefix}--snippet.#{$prefix}--skeleton .#{$prefix}--snippet-container {
    height: 100%;
  }

  .#{$prefix}--snippet.#{$prefix}--skeleton span {
    @include skeleton;
    width: 100%;
    height: 1rem;
    display: block;
    margin-top: 0.5rem;

    &:first-child {
      margin: 0;
    }

    &:nth-child(2) {
      width: 85%;
    }

    &:nth-child(3) {
      width: 95%;
    }
  }

  .#{$prefix}--snippet--single.#{$prefix}--skeleton .#{$prefix}--snippet-container {
    padding-bottom: 0;
  }

  .#{$prefix}--snippet--inline .#{$prefix}--btn--copy__feedback {
    right: auto;
  }

  // Skeleton State
  .#{$prefix}--snippet--code.#{$prefix}--skeleton {
    height: rem(98px);
  }

  .#{$prefix}--snippet--terminal.#{$prefix}--skeleton {
    height: rem(56px);
  }

  .#{$prefix}--snippet.#{$prefix}--skeleton .#{$prefix}--snippet-container {
    height: 100%;
  }

  .#{$prefix}--snippet.#{$prefix}--skeleton code {
    @include skeleton;
    width: 100%;
    height: 1rem;
    display: block;
  }
}

@include exports('snippet') {
  @if feature-flag-enabled('components-x') {
    @include snippet--x;
  } @else {
    @include snippet;
  }
}