@import (reference) '../variables.less';

.root {
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  white-space: nowrap;
  padding: @preview-padding 0 (@preview-padding - 10px);
  text-align: center;
  display: flex;
}

.frameContainer {
  position: relative;
  height: 100%;
  text-align: left;
  display: flex;
  flex-direction: column;
  margin-right: @preview-padding;

  &:first-child {
    margin-left: @preview-padding;
  }
}

.frame {
  position: relative;
  flex-grow: 1;
}

.frameBorder {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  box-shadow: @shadow-small;
  transition: @transition-medium;
  pointer-events: none;

  .frameContainer:not(:hover) & {
    opacity: 0.8;
  }
}

.frameName {
  @frame-name-height: 30px;

  flex: 0 0 @frame-name-height;
  height: @frame-name-height;
  transition: @transition-medium;
  display: flex;
  align-items: center;

  .frameContainer:not(:hover) & {
    opacity: @preview-inactive-label-opacity;
  }
}

.frame {
  height: 100%;
  border: 0;
  background-color: @white;
}