/**
 * Preview Pane Styles
 */

@import '~@capillarytech/cap-ui-library/styles/_variables.scss';

.preview-pane {
  height: 100%;
  max-height: 33.25rem;
  position: relative;
  background-color: $CAP_G09;
  padding: 1rem;
  overflow: auto;

  &__mode-controls {
    position: absolute;
    top: 1.5rem;
    right: 2rem;
    z-index: 10;
    background-color: $CAP_G07;
    border-radius: 0.5rem;
    padding: 0.25rem;
    display: flex;
    gap: 0.25rem;
    align-items: center;

    .preview-mode-group {
      margin: 0;

      .ant-btn {
        border: none;
        box-shadow: none;
        padding: 0.25rem;
        min-width: 1.75rem;
        height: 1.75rem;
        border-radius: 0.25rem;
        display: flex;
        align-items: center;
        justify-content: center;

        &.ant-btn-primary {
          background-color: $CAP_WHITE;
          color: $CAP_G01;

          .anticon {
            color: $CAP_G01;
            font-size: 1.25rem;
          }
        }

        &:not(.ant-btn-primary) {
          background-color: transparent;
          color: $CAP_G04;

          .anticon {
            color: $CAP_G04;
            font-size: 1.25rem;
          }

          &:hover,
          &.preview-mode-group__btn--active {
            background-color: $CAP_WHITE;
          }
        }
      }
    }
  }

  &__content {
    height: calc(100%);
    max-height: 34.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: auto;
  }

  &__iframe {
    border: none;
    border-radius: 0.25rem;
    box-shadow: 0 0.0625rem 0.1875rem rgba($CAP_G01, 0.1);
    background-color: $CAP_WHITE;
    width: 100%;
    height: 28.125rem;
    max-height: 34.25rem;

    &--mobile {
      // Width and height now controlled by React inline styles
      border-radius: 0.75rem;
      box-shadow: 0 0.25rem 1.25rem rgba($CAP_G01, 0.1);
    }
  }

  iframe {
    border: none;
    border-radius: 0.25rem;
    box-shadow: 0 0.0625rem 0.1875rem rgba($CAP_G01, 0.1);
    background-color: $CAP_WHITE;
  }

  .device-frame {
    position: relative;
    display: inline-block;

    .home-indicator {
      position: absolute;
      bottom: -0.25rem;
      left: 50%;
      transform: translateX(-50%);
      width: 8.375rem;
      height: 0.3125rem;
      background-color: $CAP_G02;
      border-radius: 0.1875rem;
      z-index: 1070;
    }

    &::before {
      content: '';
      position: absolute;
      top: -1.25rem;
      left: 50%;
      transform: translateX(-50%);
      width: 3.75rem;
      height: 0.375rem;
      background-color: $CAP_G02;
      border-radius: 0.1875rem;
      z-index: 1070 + 1;
    }

    &::after {
      content: '';
      position: absolute;
      top: -0.9375rem;
      right: 1.25rem;
      width: 0.75rem;
      height: 0.75rem;
      background-color: $CAP_G02;
      border-radius: 50%;
      z-index: 1070 + 1;
    }
  }

  // Media queries for responsive behavior - iframe sizing now controlled by React
  // @media (max-width: 768px) - Removed: sizing now handled by React inline styles

  @media (max-width: 576px) {

    .device-frame,
    .preview-pane .device-frame {
      transform: scale(0.8);
      transform-origin: center top;
      // iframe sizing now controlled by React inline styles
    }
  }

  .preview-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: $CAP_G10;

    .loading-content {
      text-align: center;

      .loading-icon {
        font-size: 3rem;
        margin-bottom: 1rem;
        animation: pulse 2s infinite;
      }
    }
  }

  @keyframes pulse {

    0%,
    100% {
      opacity: 1;
    }

    50% {
      opacity: 0.5;
    }
  }

  .preview-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    height: calc(100% - 2rem);
    color: $CAP_G10;
    text-align: center;
    margin: 0;
    width: 100%;

    .empty-content {
      padding: 2.5rem 1.25rem;

      .empty-icon {
        font-size: 3rem;
        margin-bottom: 1rem;
      }

      p {
        margin: 0.25rem 0;
        color: $CAP_G10;
        font-size: 0.875rem;
      }

      .preview-mode-info {
        font-size: 0.75rem;
        margin-top: 0.5rem;
      }
    }
  }
}