// @file CSS styles for collage controls
// @copyright Digital Living Software Corp. 2014-2015

.pip-collage {
  display: block;
  width: 100%;
  position: relative;

  .pip-collage-section {
    &:first-of-type {
      margin-top: 0px;
    }

    width: 100%;
    height: 200px;
    margin-top: 8px;

    .flex-container;
    .flex-direction-column;
  }

  .pip-full-width {
    width: 100%;
  }

  .pip-full-height {
    height: 100%;
  }

  .pip-picture-group {
    max-width: 100%;
    max-height: 100%;
  }

  .pip-picture-container {
    display: block;
    position: relative;
    max-width: 100%;
    max-height: 100%;
  }

  .pip-picture {
    position: absolute;
    left: 0px;
    right: 0px;
    top: 0px;
    bottom: 0px;

    &.pip-top {
      top: 4px;
    }

    &.pip-bottom {
      bottom: 4px;
    }

    &.pip-left {
      left: 4px;
    }

    &.pip-right {
      right: 4px;
    }

    div {
      background: none!important;
    }

  }

}