@use "../../../../styles/mixins.scss";

@include mixins.respond-below(sm) {
  :global(#event-manage-main) {
    overflow: auto;
  }
}

.container {
  display: flex;
  flex-direction: row;
  margin: calc(var(--hi-spacing-lg) * -1);

  h2 {
    margin-bottom: 0;
  }

  @include mixins.respond-below(sm) {
    flex-direction: column;
  }

  .sidebar {
    min-width: 380px;
    max-width: 380px;
    background-color: #ffffff;
    padding: var(--hi-spacing-lg);
    height: calc(100vh - 55px);
    overflow-y: auto;
    position: sticky;
    top: 0;
    border-right: 1px solid var(--mantine-color-gray-2);

    @include mixins.respond-below(sm) {
      width: 100%;
      min-width: unset;
      max-width: unset;
      position: relative;
      overflow: auto;
      height: auto;
      border-right: none;
      border-bottom: 1px solid var(--mantine-color-gray-2);
    }

    .sticky {
      position: sticky;
      top: 0;
    }

    .header {
      margin-bottom: var(--hi-spacing-lg);
      padding-bottom: var(--hi-spacing-md);
      border-bottom: 1px solid var(--mantine-color-gray-2);
      
      h2 {
        margin: 0 0 var(--hi-spacing-xs) 0;
        font-size: 1.375rem;
        font-weight: 600;
        color: var(--mantine-color-gray-9);
      }
    }

    .accordion {
      margin-bottom: 0;
      
      .accordionItem {
        border: 1px solid var(--mantine-color-gray-3);
        border-radius: var(--mantine-radius-md);
        overflow: hidden;
        
        &:not(:last-child) {
          margin-bottom: var(--hi-spacing-md);
        }

        :global(.mantine-Accordion-control) {
          padding: var(--hi-spacing-md);
          background: var(--mantine-color-gray-0);
          
          &:hover {
            background: var(--mantine-color-gray-1);
          }
          
          &[data-active] {
            border-bottom: 1px solid var(--mantine-color-gray-2);
          }
        }

        :global(.mantine-Accordion-panel) {
          padding: 0;
          background: white;
        }

        :global(.mantine-Accordion-content) {
          padding: var(--hi-spacing-lg);
        }
      }
    }

    .fieldset {
      border: none;
      padding: 0;
      margin: 0;

      // Fix large margins on ColorInput components
      :global(.mantine-ColorInput-root) {
        margin-bottom: 0;
      }

      :global(.mantine-ColorInput-label) {
        font-weight: 500;
        font-size: 0.875rem;
      }

      :global(.mantine-ColorInput-description) {
        font-size: 0.8125rem;
        margin-top: 0.25rem;
      }

      // TextInput styling
      :global(.mantine-TextInput-label) {
        font-weight: 500;
        font-size: 0.875rem;
      }

      :global(.mantine-TextInput-description) {
        font-size: 0.8125rem;
        margin-top: 0.25rem;
      }
    }
  }

  .previewContainer {
    height: calc(100vh - 55px);
    width: 100%;
    overflow: hidden;
    min-width: 400px;

    @include mixins.respond-below(sm) {
      padding: 20px;
    }

    .preview {
      width: 100%;
      height: 100%;
      overflow-y: auto;
    }

    .iframeContainer {
      position: relative;
      width: 100%;
      height: 100%;
      min-height: 500px;
      --scale: 0.75;

      iframe {
        transform: scale(var(--scale));
        transform-origin: 0 0;
        width: calc(100% / var(--scale));
        height: calc(100% / var(--scale));
        border: none;
        position: absolute;
        inset: 0;
      }
    }

    > h2 {
      display: none;
    }

    @include mixins.respond-below(sm) {
      > h2 {
        display: block;
      }

      width: 100%;
      min-width: unset;
      max-width: unset;
      position: relative;
      overflow: auto;
      height: auto;
    }
  }
}
