:root {
  --bqo-padding-x: 0.6em;
  --bqo-padding-y: 0.3em;
  --bqo-padding-x-mobile: 0.5em;
  --bqo-padding-y-mobile: 0.25em;
  --bqo-offset-x: 8px;
  --bqo-offset-y: 8px;
}

.wp-block-image,
.wp-block-cover,
.wp-block-cover-image {
  position: relative;
}

.bqo-source-overlay {
  position: absolute;
  z-index: 4;
  display: inline-flex;
  align-items: center;
  max-width: calc(100% - var(--bqo-offset-x) - var(--bqo-offset-y));
  padding: var(--bqo-padding-y) var(--bqo-padding-x);
  border-radius: var(--theme-button-border-radius, 3px);
  line-height: var(--theme-line-height, 1.2);
  background: rgb(from var(--bqo-bg) r g b / var(--bqo-bg-opacity));
  color: var(--bqo-color);
  font-size: var(--bqo-font-size);
  box-sizing: border-box;
  word-break: break-word;
  text-align: left;
  transition: var(--theme-transition, all .2s ease-in-out);
}

.bqo-source-overlay:hover,
.bqo-source-overlay:focus {
  background: rgb(from var(--bqo-bg) r g b / 1);
}

.bqo-source-link,
.bqo-source-link:hover,
.bqo-source-link:focus {
  color: inherit !important;
  text-decoration: var(--has-link-decoration, var(--theme-text-decoration, none));
}

.bqo-source-overlay.bottom-left {
  left: var(--bqo-offset-x);
  bottom: var(--bqo-offset-y);
}

.bqo-source-overlay.bottom-right {
  right: var(--bqo-offset-x);
  bottom: var(--bqo-offset-y);
}

.bqo-source-overlay.top-left {
  left: var(--bqo-offset-x);
  top: var(--bqo-offset-y);
}

.bqo-source-overlay.top-right {
  right: var(--bqo-offset-x);
  top: var(--bqo-offset-y);
}

.bqo-source-overlay.rot-0 {
  transform: none;
}

.bqo-source-overlay.rot-90 {
  writing-mode: vertical-rl;
  text-orientation: mixed;
  padding: var(--bqo-padding-x) var(--bqo-padding-y);
}

.bqo-source-overlay.rot-270 {
  writing-mode: sideways-lr;
  text-orientation: mixed;
  padding: var(--bqo-padding-x) var(--bqo-padding-y);
}

.wp-block-cover .bqo-source-overlay,
.wp-block-cover-image .bqo-source-overlay {
  z-index: 5;
}

@media (max-width: 782px) {
  .bqo-source-overlay {
    padding: var(--bqo-padding-y-mobile) var(--bqo-padding-x-mobile);
  }
.bqo-source-overlay.rot-90 {
  padding: var(--bqo-padding-x-mobile) var(--bqo-padding-y-mobile);
}
}