//
// 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 '../../globals/scss/theme-tokens';
@import '../../globals/scss/tooltip';
@import '../../globals/scss/keyframes';
@import 'mixins';

/// Code snippet styles
/// @access private
/// @group code-snippet
@mixin snippet {
  .#{$prefix}--snippet {
    @include reset;
  }

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

  // Inline Code Snippet
  .#{$prefix}--snippet--inline {
    @include reset;

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

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

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

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

    &::before {
      @include tooltip--caret;

      display: none;
    }

    .#{$prefix}--copy-btn__feedback {
      @include tooltip--content('icon');

      display: none;
      box-sizing: content-box;
      margin: auto;
      overflow: visible;
      clip: auto;
    }

    @include tooltip--placement('icon', 'bottom', 'center');
  }

  .#{$prefix}--snippet--inline.#{$prefix}--copy-btn--animating::before,
  .#{$prefix}--snippet--inline.#{$prefix}--copy-btn--animating
    .#{$prefix}--copy-btn__feedback {
    display: block;
  }

  .#{$prefix}--snippet--inline.#{$prefix}--copy-btn--animating.#{$prefix}--copy-btn--fade-out::before,
  .#{$prefix}--snippet--inline.#{$prefix}--copy-btn--animating.#{$prefix}--copy-btn--fade-out
    .#{$prefix}--copy-btn__feedback {
    animation: $duration--fast-02 motion(standard, productive) hide-feedback;
  }

  .#{$prefix}--snippet--inline.#{$prefix}--copy-btn--animating.#{$prefix}--copy-btn--fade-in::before,
  .#{$prefix}--snippet--inline.#{$prefix}--copy-btn--animating.#{$prefix}--copy-btn--fade-in
    .#{$prefix}--copy-btn__feedback {
    animation: $duration--fast-02 motion(standard, productive) show-feedback;
  }

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

  .#{$prefix}--snippet--inline.#{$prefix}--snippet--no-copy {
    display: inline-block;

    &:hover {
      background-color: $ui-01;
      cursor: auto;
    }
  }

  // Single Line Snippet
  .#{$prefix}--snippet--single {
    @include bx--snippet;

    min-width: rem(320px);
    max-width: rem(760px);
    height: $carbon--spacing-08;
    padding-right: $carbon--spacing-08;
  }

  .#{$prefix}--snippet--single.#{$prefix}--snippet--no-copy {
    padding: 0;

    &::after {
      right: $carbon--spacing-05;
    }
  }

  .#{$prefix}--snippet--single .#{$prefix}--snippet-container {
    position: relative;
    display: flex;
    align-items: center;
    height: 100%;
    padding-left: $carbon--spacing-05;
    overflow-x: auto;
    border-right: solid $carbon--spacing-05 transparent;

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

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

    padding-right: $spacing-03;
    white-space: nowrap;
  }

  .#{$prefix}--snippet--single::after {
    position: absolute;
    top: 0;
    right: rem(56px);
    width: rem(16px);
    height: 100%;
    // Safari interprets `transparent` differently, so make color token value transparent instead:
    background-image: linear-gradient(to right, rgba($ui-01, 0), $ui-01);
    content: '';
  }

  // Multi Line Snippet
  .#{$prefix}--snippet--multi {
    @include bx--snippet;

    min-width: rem(320px);
    max-width: 100%;
    padding: $carbon--spacing-05;
  }

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

  // expanded snippet container
  .#{$prefix}--snippet--multi.#{$prefix}--snippet--expand
    .#{$prefix}--snippet-container {
    max-height: 100%;
    padding-bottom: $spacing-05;
    transition: max-height $duration--moderate-01 motion(standard, productive);
  }

  // closed pre
  .#{$prefix}--snippet--multi .#{$prefix}--snippet-container pre {
    padding-right: $carbon--spacing-08;
    padding-bottom: rem(24px);
    overflow-x: scroll;
  }

  .#{$prefix}--snippet--multi.#{$prefix}--snippet--no-copy
    .#{$prefix}--snippet-container
    pre {
    padding-right: 0;
  }

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

  .#{$prefix}--snippet--multi .#{$prefix}--snippet-container pre::after {
    position: absolute;
    top: 0;
    right: 0;
    width: rem(16px);
    height: 100%;
    // Safari interprets `transparent` differently, so make color token value transparent instead:
    background-image: linear-gradient(to right, rgba($ui-01, 0), $ui-01);
    content: '';
  }

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

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

  .#{$prefix}--snippet-button {
    @include reset;

    position: absolute;
    top: 0;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: $carbon--spacing-08;
    height: $carbon--spacing-08;
    padding: 0;
    overflow: visible;
    background-color: $ui-01;
    border: none;
    outline: none;
    cursor: pointer;

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

      outline-color: $focus;
    }
  }

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

  .#{$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');
    // Override one in code snippet
    @include carbon--font-family('sans');

    top: 0.75rem;
    right: 1.25rem;
    left: inherit;
    z-index: z('overlay');
    font-weight: 400;
  }

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

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

  // TODO: remove copy button styles above
  .#{$prefix}--snippet .#{$prefix}--copy-btn {
    position: absolute;
    top: 0;
    right: 0;

    // Override inherited rule in code snippet
    @include carbon--font-family('sans');
  }

  // Show more / less button
  button.#{$prefix}--btn.#{$prefix}--snippet-btn--expand {
    @include type-style('body-short-01');
    @include carbon--font-family('sans');

    position: absolute;
    right: $spacing-03;
    bottom: $spacing-03;
    display: inline-flex;
    align-items: center;
    padding: $spacing-03;
    padding-left: $carbon--spacing-05;
    color: $text-01;
    background-color: $field-01;
    border: 0;
  }

  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 {
    margin-bottom: rem(1px);
    margin-left: $spacing-03;
    transform: rotate(0deg);
    transition: $duration--moderate-01 motion(standard, productive);
    fill: $text-01;
  }

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

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

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

    border-color: transparent;
  }

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

  // Light version
  .#{$prefix}--snippet.#{$prefix}--snippet--light,
  .#{$prefix}--snippet.#{$prefix}--snippet--light .#{$prefix}--snippet-button,
  .#{$prefix}--snippet.#{$prefix}--snippet--light
    .#{$prefix}--snippet-btn--expand,
  .#{$prefix}--snippet.#{$prefix}--snippet--light .#{$prefix}--copy-btn {
    background-color: $ui-02;
  }

  .#{$prefix}--snippet.#{$prefix}--snippet--light.#{$prefix}--snippet--inline:hover,
  .#{$prefix}--snippet.#{$prefix}--snippet--light
    .#{$prefix}--snippet-button:hover,
  .#{$prefix}--snippet.#{$prefix}--snippet--light
    .#{$prefix}--snippet-btn--expand:hover,
  .#{$prefix}--snippet.#{$prefix}--snippet--light .#{$prefix}--copy-btn:hover {
    background-color: $hover-ui-light;
  }

  .#{$prefix}--snippet.#{$prefix}--snippet--light.#{$prefix}--snippet--single::after,
  .#{$prefix}--snippet.#{$prefix}--snippet--light.#{$prefix}--snippet--multi
    .#{$prefix}--snippet-container
    pre::after {
    // Safari interprets `transparent` differently, so make color token value transparent instead:
    background-image: linear-gradient(to right, rgba($ui-02, 0), $ui-02);
  }

  // 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;

    display: block;
    width: 100%;
    height: 1rem;
  }

  .#{$prefix}--snippet-button .#{$prefix}--btn--copy__feedback {
    // (The height of button) + (The height of the tooltip's triangle) + 4px
    top: rem(50.8px);
    right: auto;
    left: 50%;

    &::before {
      top: 0;
    }

    &::after {
      top: rem(-4px);
    }
  }

  .#{$prefix}--snippet--multi
    .#{$prefix}--snippet-button
    .#{$prefix}--btn--copy__feedback {
    // (The height of button) + (The height of the tooltip's triangle) + 4px
    top: rem(42.8px);
  }

  .#{$prefix}--snippet--inline .#{$prefix}--btn--copy__feedback {
    // TODO: use updated global tooltip mixins under the hood
    // since all of the positioning values for the copy button tooltip are arbitrary hard coded rem values, we need this arbitrary 4px offset to keep the proper tooltip spacing according to the spec
    top: calc(100% - #{rem(4px)});
    right: auto;
    left: 50%;
  }

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

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

  .#{$prefix}--snippet.#{$prefix}--skeleton span {
    @include skeleton;

    display: block;
    width: 100%;
    height: 1rem;
    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;
  }
}

@include exports('snippet') {
  @include snippet;
}
