@import "../../app/style";

$panelWidth: $previewWidth + 40px;
$panelHeight: $previewHeight + 40px;
$panelBorderSize: 8px;

.panel {
  z-index: 2;
  padding: 20px;
  border: none;
  position: absolute;
  height: $panelHeight;
  width: $panelWidth;
  background-image: $panelBackground;
  background-repeat: repeat;

  &-content {
    display: flex;
    justify-content: flex-start;
    align-items: center;
  }

  button {
    z-index: 3;
    position: absolute;
  }

  &--bottom {
    bottom: -$panelHeight + $panelBorderSize;
    width: 100%;
    transition: bottom $transitionDuration $transitionType;
    border-top: $panelBorderSize double $fontColor;
    border-image: $borderTop 16 32 16 32;
    border-image-outset: $panelBorderSize - 2px 0 0 0;
    border-image-width: $panelBorderSize * 2 0 0 100%;
    border-image-repeat: round round;

    .panel-content {
      height: 100%;
    }

    button {
      left: 50%;
      transform: translateX(-50%);
      top: -$buttonHeight - 5px;
    }

    &--shown {
      bottom: 0;
    }
  }

  &--left {
    left: -$panelWidth + $panelBorderSize;
    height: 100%;
    border-right: $panelBorderSize double $fontColor;
    border-image: $borderRight 32 16 0 0;
    border-image-outset: 0 $panelBorderSize - 2px 0 0;
    border-image-width: 100% $panelBorderSize*2 0 0;
    transition: left $transitionDuration $transitionType;

    .panel-content {
      flex-direction: column;
      width: 100%;
    }

    button {
      top: 50%;
      transform: translateY(-50%) rotate(90deg);
      right: -80px;
    }

    &--shown {
      left: 0;
    }
  }
}
