@import 'src/styles/variables';

$pad_usual: $content_bg_lightest;

.title {
  position: relative;

  span {
    position: absolute;
    top: -$gap;
    left: $radius;
    transform: translate(0, -100%);
    background: $pad_usual;
    border-radius: 4px;
    font: $font_10_semibold;
    line-height: 12px;
    padding: 2px $gap * 0.5;
    text-transform: uppercase;

    .danger & {
      background: $content_bg_danger;
    }
  }
}

.pad {
  padding: $gap;
  box-shadow: inset $pad_usual 0 0 0 2px;
  border-radius: $radius;
  position: relative;

  &.danger {
    box-shadow: inset $content_bg_danger 0 0 0 2px;
  }

  &.with_title {
    padding-top: $gap * 2;
  }
}
