$button-size-small: var(--wds-button-size-small, var(--wds-space-700));
$button-size-medium: var(--wds-button-size-medium, var(--wds-space-800));
$radius-inline: var(
  --wds-code-snippet-border-radius-inline,
  var(--wds-border-radius-100)
);
$radius-singleline: var(
  --wds-code-snippet-border-radius-singleline,
  var(--wds-border-radius-100)
);
$radius-multiline: var(
  --wds-code-snippet-border-radius-multiline,
  var(--wds-border-radius-100)
);
$scrollbar-fill: var(--wds-scrollbar-fill, var(--wds-color-black-550));
$scrollbar-fill-hover: var(
  --wds-scrollbar-fill-hover,
  var(--wds-color-black-400)
);
$scrollbar-fill-active: var(
  --wds-scrollbar-fill-active,
  var(--wds-color-black-400)
);
$padding-h-xx-tiny: var(--wds-space-padding-horizontal-xx-tiny, 4px);
$padding-h-x-tiny: var(--wds-space-padding-horizontal-x-tiny, 8px);
$padding-h-small: var(--wds-space-padding-horizontal-small, 16px);
$padding-h-medium: var(--wds-space-padding-horizontal-medium, 12px);
$padding-v-x-tiny: var(--wds-space-padding-vertical-x-tiny, 8px);

.code-snippet {
  &--variant-singleline &__code,
  &--variant-multiline &__code {
    /* stylelint-disable-next-line plugin/use-baseline */
    scrollbar-color: $scrollbar-fill transparent;
  }

  &--variant-inline {
    border-radius: $radius-inline;
  }

  &--variant-singleline {
    min-height: $button-size-small;
    border-radius: $radius-singleline;
  }

  &--variant-singleline &__code {
    padding-inline-end: calc(
      #{$button-size-small} + #{$padding-h-xx-tiny} - #{$padding-h-small}
    );
  }

  &--variant-singleline#{&}--disable-copy &__code {
    padding-inline-end: $padding-h-small;
  }

  &--variant-singleline#{&}--size-medium {
    min-height: $button-size-medium;
  }

  &--variant-singleline#{&}--size-medium &__code {
    padding-inline-end: calc(
      #{$button-size-medium} + #{$padding-h-xx-tiny} - #{$padding-h-small}
    );
  }

  &--variant-singleline#{&}--size-medium#{&}--disable-copy &__code {
    padding-inline-end: $padding-h-small;
  }

  &--variant-multiline {
    min-height: calc(#{$button-size-medium} + 2 * #{$padding-v-x-tiny});
    border-radius: $radius-multiline;
  }

  &--variant-multiline &__code {
    padding-inline-end: calc(#{$button-size-medium} + #{$padding-h-x-tiny});
  }

  &--variant-multiline#{&}--disable-copy &__code {
    padding-inline-end: $padding-h-medium;
  }

  &--variant-singleline &__code::-webkit-scrollbar-thumb,
  &--variant-multiline &__code::-webkit-scrollbar-thumb {
    background-color: $scrollbar-fill;
  }

  @media (hover: hover) {
    &--variant-singleline &__code::-webkit-scrollbar-thumb:hover,
    &--variant-multiline &__code::-webkit-scrollbar-thumb:hover {
      background-color: $scrollbar-fill-hover;
    }
  }

  &--variant-singleline &__code::-webkit-scrollbar-thumb:active,
  &--variant-multiline &__code::-webkit-scrollbar-thumb:active {
    background-color: $scrollbar-fill-active;
  }

  &__copy-button#{&}__copy-button--size-small {
    width: $button-size-small;
    height: $button-size-small;
  }

  &__copy-button#{&}__copy-button--size-medium {
    width: $button-size-medium;
    height: $button-size-medium;
  }

  &__copy-button#{&}__copy-button--variant-singleline {
    border-radius: $radius-singleline;
  }

  &__copy-button#{&}__copy-button--variant-multiline {
    border-radius: $radius-multiline;
  }
}