.code-snippet {
  position: relative;

  padding: var(--padding--lg);
  padding-right: var(--padding--4xl);

  background-color: rgb(var(--background--informative-low-default--light));
  border: 1px dashed rgb(var(--border--informative-strong-default--light));

  &__content {
    position: relative;

    margin: 0;

    font-family: var(--fontFamily--monospace);
    font-size: var(--fontSize--body-medium);
    font-weight: var(--fontWeight--body-medium);
    line-height: var(--lineHeight--body-medium);
    color: rgb(var(--foreground--neutral-full-default--light));
    letter-spacing: var(--letterSpacing--body-medium);
    word-break: break-all;
    white-space: pre-wrap;

    &--url {
      font-family: var(--fontFamily--body);
      color: rgb(var(--foreground--links-strong-default--light));
    }

    &--collapsed {
      overflow: hidden;
    }
  }

  &__copy {
    position: absolute;
    top: var(--offset--md);
    right: var(--offset--md);
  }

  &__footer {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;

    display: flex;
    justify-content: flex-end;

    margin-top: var(--margin--xs);
    padding: var(--padding--lg);

    &--collapsed {
      background: linear-gradient(to bottom, transparent 0%, rgb(var(--background--informative-low-default--light)) 100%);
    }
  }
}