@use "../tokens/color" as *;
@use "../tokens/font" as *;
@use "../tokens/spacing" as *;

:not(pre) > code,
.iati-code {
  background-color: $color-grey-10;
  border: 1px solid $color-grey-20;
  border-radius: 4px;
  color: $color-grey-90;
  font-family: $font-stack-monospace;
  padding: 0.1em 0.2em;
}

pre > code,
.iati-code--block {
  background-color: $color-grey-10;
  border: 1px solid $color-grey-20;
  border-radius: 4px;
  color: $color-grey-90;
  display: block;
  font-family: $font-stack-monospace;
  overflow-x: scroll;
  padding: $padding-block;
}

.iati-reference {
  background-color: #fff;
  border: 1px solid $color-grey-20;
  border-radius: 4px;
  color: $color-blue-80;
  font-family: $font-stack-monospace;
  padding: 0.1em 0.2em;

  &--block {
    border-radius: 4px;
    display: block;
    overflow-x: scroll;
    padding: $padding-block;
  }
}

.iati-kbd {
  @extend .iati-code;

  .iati-kbd {
    border: none;
  }
}