.drop-shadow-box {
  background-color: #fff;
  border: 1px solid #cdcfd2;
  width: 225px;
  height: 50px;
  box-shadow: 0px 0px 5px 0 rgba(0, 0, 0, 0.3);
}

.sky-repeater-max-width {
  width: 500px;
}

.app-repeater-visual-code-block {
  overflow: auto;
}

.sky-demo-btn-edit {
  margin: 0 0 0 10px;
  padding: 0;
  line-height: 0;
}

.app-screenshot sky-repeater-item sky-column {
  padding: 0;
}

.show-roles {
  ::ng-deep {
    .sky-repeater {
      position: relative;
    }

    .sky-repeater:before,
    .sky-repeater-item:before,
    .sky-repeater-item-title:before,
    .sky-repeater-item-content:before {
      display: inline-block;
      position: absolute;
      top: -0.3em;
      z-index: 10;
      padding: 3px 2px;
      font-size: small;
      opacity: 0.5;
      color: #2a2a2a;
    }
    .sky-repeater:before {
      left: 1em;
      background-color: #fff4c2;
      content: 'repeater role: ' attr(role);
    }
    .sky-repeater-item:before {
      left: 10em;
      background-color: #daffc2;
      content: 'item role: ' attr(role);
    }
    .sky-repeater-item-title:before {
      left: 20em;
      background-color: #c2ffed;
      content: 'title role: ' attr(role);
    }
    .sky-repeater-item-content:before {
      left: 30em;
      background-color: #c2d7ff;
      content: 'content role: ' attr(role);
    }
  }
}
