@use '../common/variables';
@use '../utilities/text';

// —————————————————————————————————————————————————————————————————
// elements
// default
// dense
// —————————————————————————————————————————————————————————————————

// —————————————————————————————————————————————————————————————————
// elements
// —————————————————————————————————————————————————————————————————

.snippet {
  @extend %caption;
  font-family: "Roboto Mono", Courier, monospace;
  word-wrap: break-word;
  width: 100%;
  position: relative;
  border-radius: variables.$border-radius-sm;
  margin: 0;
  padding: .5rem .75rem;
  background-color: variables.$hover;
  border: variables.$border;
  
  & + & {
    margin-block-start: .5rem;
  }

  p > & {
    margin-inline-end: .25rem;
    margin-inline-start: .25rem;
  }

  .tag {
    font-family: variables.$font, variables.$font-fallback;
    float: right;
    float: inline-end;
    margin-block-start: 1px;
    margin-inline-end: -.25rem;
  }
}

// —————————————————————————————————————————————————————————————————
// default
// —————————————————————————————————————————————————————————————————

.snippet-default {

  &:after {
    @extend %overline;
    content: "Default";
    font-family: variables.$font, variables.$font-fallback;
    float: right;
    float: inline-end;
    margin-block-start: 1px;
    margin-inline-end: -.25rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: variables.$weight-bold;
    border-radius: variables.$border-radius-sm;
    white-space: nowrap; // prevent text to go on multiple lines
    position: absolute;
    inset-block-start: .5rem;
    inset-inline-end: .75rem;
    height: 1rem;
    padding-inline-end: .25rem;
    padding-inline-start: .25rem;
    padding-block-end: 0.1em;
    background-color: variables.$text-disabled;
  }
}

// —————————————————————————————————————————————————————————————————
// dense
// —————————————————————————————————————————————————————————————————

.snippet-dense {
  @extend %overline;
  padding: .25rem .5rem !important;

  &.snippet-default:after {
    inset-block-start: .25rem;
    inset-inline-end: .5rem;
  }
}