//
// Just utils for doing UI previews
// --------------------------------------------------


// Animatation
.ui-preview, .ui-preview-text, .ui-preview-img {
  background: @ui-preview-bg;
  background-image: linear-gradient(90deg, @ui-preview-bg, @ui-preview-light 50%, @ui-preview-bg);
  background-size: 1300px 1px;

  .animation(ui-preview-animation 2s linear infinite);
}

@-webkit-keyframes ui-preview-animation {
  from  { background-position: 1300px 0; }
  to    { background-position: 0 0; }
}

@keyframes ui-preview-animation {
  from  { background-position: 1300px 0; }
  to    { background-position: 0 0; }
}


// Fill
.ui-preview {
  .fill {
    background-color: @body-bg;

    // Force icons to use faded preview color
    .material-icons {
      color: @ui-preview-bg;
    }
  }
}


// Few shorthands
.ui-preview-img {
  display: inline-block;

  &>* {
    .opacity(0);
  }
}

.ui-preview-text {
  border-radius: 20px;
  .opacity(0.6);

  color: transparent;
}


// Preset: list-group
.ui-preview .list-group-preview {
  border-radius: @list-group-border-radius;
  .shadow-2dp();

  &>.fill {
    margin-bottom: 1px;
    padding: 10px 15px;

    // Round the first and last items
    &:first-child {
      .border-top-radius(@list-group-border-radius);
    }

    &:last-child {
      margin-bottom: 0;
      .border-bottom-radius(@list-group-border-radius);
    }
  }
}