@import '../prefix';

.#{$prefix}--snippet--website {
  margin-bottom: $spacing-06;
}

.#{$prefix}--snippet--website .#{$prefix}--snippet--single {
  background: $ui-05;
  color: $inverse-01;
  max-width: 100%;
}

.#{$prefix}--snippet--website .code-snippet .#{$prefix}--snippet--single {
  max-width: 47.5rem;
}

.#{$prefix}--snippet--website .#{$prefix}--snippet--single::after {
  background-image: linear-gradient(to right, rgba($ui-05, 0), rgba($ui-05, 1));
}

.#{$prefix}--snippet--website .#{$prefix}--snippet--multi {
  background: $ui-05;
  color: $inverse-01;
}

.#{$prefix}--snippet--website
  .#{$prefix}--snippet--multi
  .#{$prefix}--snippet-container
  pre::after {
  background-image: linear-gradient(to right, rgba($ui-05, 0), rgba($ui-05, 1));
}

.#{$prefix}--snippet--website
  .#{$prefix}--snippet--multi
  .#{$prefix}--snippet-container {
  overflow: auto;
}

.#{$prefix}--snippet--website .#{$prefix}--snippet-button {
  background: $ui-05;
  transition: background $transition--base;

  &:hover {
    background: #353535;
  }
}

.#{$prefix}--snippet--website
  button.#{$prefix}--btn.#{$prefix}--snippet-btn--expand {
  color: $carbon--gray-10;
  background: $carbon--gray-100;

  &:hover {
    background: #353535;
  }

  &:focus::before {
    border-color: $inverse-02;
  }
}

.#{$prefix}--snippet--website .#{$prefix}--snippet__icon {
  fill: $icon-03;
}

.#{$prefix}--snippet--website
  .#{$prefix}--snippet--multi
  .#{$prefix}--snippet-container {
  min-height: auto;
}

.#{$prefix}--snippet--website .#{$prefix}--icon-chevron--down {
  fill: $icon-03;
}

.#{$prefix}--snippet--website .#{$prefix}--snippet {
  margin: 0 0 $spacing-06 0;
  background: $ui-05;
  color: $inverse-01;
}

.#{$prefix}--snippet--website pre div code[class*='language-'] {
  white-space: pre;
}

code[class*='language-'],
pre[class*='language-'] {
  font-size: rem(14px) !important;
  line-height: rem(20px) !important;
  color: #fff !important;
}

:not(pre) > code[class*='language-'],
pre[class*='language-'] {
  background: $ui-05;
  padding: 0 !important;
  margin: 0 !important;
}

.token {
  white-space: nowrap;
}

.token.comment {
  color: #bebebe !important;
}

.token.tag {
  color: #6ea6ff !important;
}

.token.string {
  color: #fa75a6 !important;
}

.token.attr-name,
.token.property,
.token.function {
  color: #92eeee !important;
}

.token.attr-value,
.token.keyword,
.token.control,
.token.directive,
.token.unit,
.token.selector {
  color: #bb8eff !important;
}

.token.variable {
  color: #ffffff !important;
}

.token.inserted {
  border-bottom: 1px dotted #c22dd5;
  text-decoration: none;
}

.token.italic {
  font-style: italic;
}

.token.important,
.token.bold {
  font-weight: bold;
}

.token.important {
  color: #c94922;
}

.token.entity {
  cursor: help;
}

pre > code.highlight {
  outline: 0.4em solid #c94922;
  outline-offset: 0.4em;
}

/* overrides color-values for the Line Numbers plugin
 * http://prismjs.com/plugins/line-numbers/
 */
.line-numbers .line-numbers-rows {
  border-right-color: #dfe3e6;
}

.line-numbers-rows > span:before {
  color: #687985;
}

/* overrides color-values for the Line Highlight plugin
 * http://prismjs.com/plugins/line-highlight/
 */
.line-highlight {
  background: rgba(107, 115, 148, 0.2);
  background: -webkit-linear-gradient(
    left,
    rgba(107, 115, 148, 0.2) 70%,
    rgba(107, 115, 148, 0)
  );
  background: linear-gradient(
    to right,
    rgba(107, 115, 148, 0.2) 70%,
    rgba(107, 115, 148, 0)
  );
}