$font-family: var(
  --wds-font-family-default,
  var(
    --wsr-font-family,
    Madefor,
    'Helvetica Neue',
    Helvetica,
    Arial,
    'メイリオ',
    'meiryo',
    'ヒラギノ角ゴ pro w3',
    'hiragino kaku gothic pro',
    sans-serif
  )
);
$font-weight: var(
  --wds-font-weight-regular,
  var(--wsr-font-weight-regular, 400)
);
$fill-readonly: var(
  --wds-color-fill-standard-tertiary-readonly,
  var(--wsr-color-D75, #f7f8f8)
);
$fill-tertiary-hover: var(
  --wds-icon-button-color-fill-standard-tertiary-hover,
  var(--wds-color-fill-light-secondary-hover, var(--wsr-color-D80, #ffffff))
);
$fill-tertiary-active: var(
  --wds-icon-button-color-fill-standard-tertiary-active,
  var(--wds-color-fill-light-secondary-active, var(--wsr-color-D80, #ffffff))
);
$text-tertiary: var(
  --wds-icon-button-color-text-standard-tertiary,
  var(--wds-color-text-primary, var(--wsr-color-B10, #116dff))
);
$text-tertiary-hover: var(
  --wds-icon-button-color-text-standard-tertiary-hover,
  var(--wds-color-text-primary, var(--wsr-color-B05, #0f62e6))
);
$text-tertiary-active: var(
  --wds-icon-button-color-text-standard-tertiary-active,
  var(--wds-color-text-primary, var(--wsr-color-B10, #116dff))
);
$button-size-small: var(--wds-button-size-small, var(--wds-space-500, 30px));
$button-size-medium: var(--wds-button-size-medium, var(--wds-space-600, 38px));
$radius-inline: var(
  --wds-code-snippet-border-radius-inline,
  var(--wds-border-radius-200, 4px)
);
$radius-singleline: var(
  --wds-code-snippet-border-radius-singleline,
  var(--wds-border-radius-200, 4px)
);
$radius-multiline: var(
  --wds-code-snippet-border-radius-multiline,
  var(--wds-border-radius-200, 4px)
);
$scrollbar-fill: var(
  --wds-scrollbar-fill,
  var(--wds-color-blue-300, var(--wsr-color-B30, #a8caff))
);
$scrollbar-fill-hover: var(
  --wds-scrollbar-fill-hover,
  var(--wds-color-blue-200, var(--wsr-color-B20, #5999ff))
);
$scrollbar-fill-active: var(
  --wds-scrollbar-fill-active,
  var(--wds-color-blue-100, var(--wsr-color-B10, #116dff))
);
$scrollbar-width: var(--wds-scrollbar-width, 6px);
$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);
$padding-v-tiny: var(--wds-space-padding-vertical-tiny, 12px);

.code-snippet {
  box-sizing: border-box;
  background-color: $fill-readonly;
  color: var(--wds-color-text-standard-primary);

  &__code {
    margin: 0;
    font-family: $font-family;
    font-weight: $font-weight;
    letter-spacing: var(--wds-font-letter-spacing-0, unset);
  }

  &--variant-inline &__code {
    font-size: inherit;
    line-height: inherit;
  }

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

  &__copy-button-slot {
    position: absolute;
  }

  &--size-tiny &__code {
    font-size: var(
      --wds-font-size-body-tiny,
      var(--wsr-text-font-size-tiny, 12px)
    );
    line-height: var(
      --wds-font-line-height-body-tiny,
      var(--wsr-text-line-height-tiny, 15px)
    );
  }

  &--size-small &__code {
    font-size: var(
      --wds-font-size-body-small,
      var(--wsr-text-font-size-small, 14px)
    );
    line-height: var(
      --wds-font-line-height-body-small,
      var(--wsr-text-line-height-small, 18px)
    );
  }

  &--size-medium &__code {
    font-size: var(
      --wds-font-size-body-medium,
      var(--wsr-text-font-size-medium, 16px)
    );
    line-height: var(
      --wds-font-line-height-body-medium,
      var(--wsr-text-line-height-medium, 24px)
    );
  }

  &--variant-inline {
    display: inline-flex;
    align-items: center;
    padding: 0 $padding-h-x-tiny;
    border-radius: $radius-inline;
    cursor: pointer;
    transition: background-color 0.15s;
  }

  &--variant-inline#{&}--static {
    cursor: text;
  }

  @media (hover: hover) {
    &--variant-inline:hover:not(#{&}--static) {
      background-color: $fill-tertiary-hover;
    }
  }

  &--variant-inline:active:not(#{&}--static) {
    background-color: $fill-tertiary-active;
  }

  &--variant-singleline {
    display: flex;
    align-items: center;
    position: relative;
    min-width: 0;
    padding-inline-end: $padding-h-small;
    min-height: $button-size-small;
    border-radius: $radius-singleline;
  }

  &--variant-singleline &__code {
    display: flex;
    align-items: center;
    align-self: stretch;
    flex: 1 1 auto;
    min-width: 0;
    overflow-x: auto;
    white-space: nowrap;
    padding-inline-start: $padding-h-small;
    padding-inline-end: calc(
      #{$button-size-small} + #{$padding-h-xx-tiny} - #{$padding-h-small}
    );
  }

  &--variant-singleline &__copy-button-slot {
    display: flex;
    align-items: center;
    inset-block: 0;
    inset-inline-end: 0;
  }

  &--variant-singleline#{&}--disable-copy {
    padding-inline-end: 0;
  }

  &--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 {
    display: block;
    position: relative;
    min-width: 0;
    padding: $padding-v-tiny $padding-h-medium $padding-v-tiny 0;
    min-height: calc(#{$button-size-medium} + 2 * #{$padding-v-x-tiny});
    border-radius: $radius-multiline;
  }

  &--variant-multiline &__code {
    overflow-x: auto;
    white-space: pre;
    padding-inline-start: $padding-h-medium;
    padding-bottom: $padding-v-tiny;
    padding-inline-end: calc(#{$button-size-medium} + #{$padding-h-x-tiny});
    margin-bottom: calc(-1 * #{$padding-v-tiny});
  }

  &--variant-multiline &__copy-button-slot {
    top: $padding-v-x-tiny;
    inset-inline-end: $padding-h-x-tiny;
  }

  &--variant-multiline#{&}--wrap-text &__code {
    overflow-x: visible;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    margin-bottom: 0;
    padding-bottom: 0;
  }

  &--variant-multiline#{&}--disable-copy {
    padding-inline-end: 0;
  }

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

  &--variant-singleline &__code::-webkit-scrollbar,
  &--variant-multiline &__code::-webkit-scrollbar {
    width: 0;
    height: 12px;
  }

  &--variant-singleline &__code::-webkit-scrollbar-button,
  &--variant-multiline &__code::-webkit-scrollbar-button {
    display: none;
  }

  &--variant-singleline &__code::-webkit-scrollbar-thumb,
  &--variant-multiline &__code::-webkit-scrollbar-thumb {
    background-color: $scrollbar-fill;
    background-clip: content-box;
    border-radius: var(--wds-border-radius-full, 6px);
    border: calc((12px - #{$scrollbar-width}) / 2) solid transparent;
  }

  @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 {
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    border: 0;
    font: inherit;
    appearance: none;
    background-color: $fill-readonly;
    color: $text-tertiary;
    cursor: pointer;
    transition:
      background-color 0.15s,
      color 0.15s;
  }

  &__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;
  }

  @media (hover: hover) {
    &__copy-button:hover {
      background-color: $fill-tertiary-hover;
      color: $text-tertiary-hover;
    }
  }

  &__copy-button:active {
    background-color: $fill-tertiary-active;
    color: $text-tertiary-active;
  }
}