@use 'ui-design-system/src/styles/semantic/index' as *;

.popover-demo {
  padding: $semantic-spacing-layout-section-xs;

  &__section {
    margin-bottom: $semantic-spacing-layout-section-sm;

    &:last-child {
      margin-bottom: 0;
    }
  }

  &__title {
    font-size: map-get($semantic-typography-heading-h3, font-size);
    color: $semantic-color-text-primary;
    margin-bottom: $semantic-spacing-content-heading;
    padding-bottom: $semantic-spacing-content-list-item;
    border-bottom: $semantic-border-card-width solid $semantic-color-border-subtle;
  }

  &__subtitle {
    font-size: map-get($semantic-typography-heading-h4, font-size);
    color: $semantic-color-text-secondary;
    margin-bottom: $semantic-spacing-content-paragraph;
  }

  &__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: $semantic-spacing-layout-section-xs;
    margin-bottom: $semantic-spacing-layout-section-xs;
  }

  &__row {
    display: flex;
    flex-wrap: wrap;
    gap: $semantic-spacing-layout-section-xs;
    margin-bottom: $semantic-spacing-layout-section-xs;
    align-items: center;

    &--center {
      justify-content: center;
      min-height: 200px;
      padding: $semantic-spacing-layout-section-xs;
      border: 2px dashed $semantic-color-border-subtle;
      border-radius: $semantic-border-radius-lg;
    }

    &--positions {
      display: grid;
      grid-template-columns: 1fr auto 1fr;
      grid-template-rows: auto auto auto;
      gap: $semantic-spacing-component-lg;
      align-items: center;
      justify-items: center;
      min-height: 300px;
      padding: $semantic-spacing-layout-section-xs;
      border: 2px dashed $semantic-color-border-subtle;
      border-radius: $semantic-border-radius-lg;
    }
  }

  &__trigger-button {
    padding: $semantic-spacing-component-sm $semantic-spacing-component-md;
    border: $semantic-border-card-width solid $semantic-color-border-primary;
    border-radius: $semantic-border-radius-md;
    background: $semantic-color-surface-primary;
    color: $semantic-color-text-primary;
    font-size: $semantic-typography-font-size-md;
    cursor: pointer;
    transition: all $semantic-motion-duration-fast $semantic-motion-easing-ease;
    min-width: 120px;

    &:hover {
      background: $semantic-color-surface-secondary;
      border-color: $semantic-color-border-focus;
    }

    &:focus-visible {
      outline: 2px solid $semantic-color-focus;
      outline-offset: 2px;
    }

    &--primary {
      background: $semantic-color-primary;
      color: $semantic-color-on-primary;
      border-color: $semantic-color-primary;

      &:hover {
        background: $semantic-color-primary-hover;
        border-color: $semantic-color-primary-hover;
      }
    }

    &--small {
      padding: $semantic-spacing-component-xs $semantic-spacing-component-sm;
      font-size: $semantic-typography-font-size-sm;
      min-width: 100px;
    }

    &--large {
      padding: $semantic-spacing-component-md $semantic-spacing-component-lg;
      font-size: $semantic-typography-font-size-lg;
      min-width: 140px;
    }
  }

  &__stats {
    display: flex;
    gap: $semantic-spacing-content-paragraph;
    margin-top: $semantic-spacing-content-paragraph;
    font-size: $semantic-typography-font-size-sm;
    color: $semantic-color-text-secondary;
  }

  &__code-example {
    margin-top: $semantic-spacing-content-heading;
    padding: $semantic-spacing-component-md;
    background: $semantic-color-surface-secondary;
    border: $semantic-border-card-width solid $semantic-color-border-subtle;
    border-radius: $semantic-border-radius-md;
    font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
    font-size: $semantic-typography-font-size-sm;
    color: $semantic-color-text-secondary;
    overflow-x: auto;
  }

  // Position grid layout
  &__position-top-start {
    grid-column: 1;
    grid-row: 1;
  }

  &__position-top {
    grid-column: 2;
    grid-row: 1;
  }

  &__position-top-end {
    grid-column: 3;
    grid-row: 1;
  }

  &__position-left {
    grid-column: 1;
    grid-row: 2;
  }

  &__position-center {
    grid-column: 2;
    grid-row: 2;
  }

  &__position-right {
    grid-column: 3;
    grid-row: 2;
  }

  &__position-bottom-start {
    grid-column: 1;
    grid-row: 3;
  }

  &__position-bottom {
    grid-column: 2;
    grid-row: 3;
  }

  &__position-bottom-end {
    grid-column: 3;
    grid-row: 3;
  }

  // Custom popover content styles
  .popover-content {
    &__menu {
      min-width: 200px;

      .menu-item {
        display: block;
        width: 100%;
        padding: $semantic-spacing-component-sm $semantic-spacing-component-md;
        border: none;
        background: transparent;
        color: $semantic-color-text-primary;
        font-size: $semantic-typography-font-size-sm;
        text-align: left;
        cursor: pointer;
        transition: background-color $semantic-motion-duration-fast $semantic-motion-easing-ease;

        &:hover {
          background: $semantic-color-surface-secondary;
        }

        &:focus-visible {
          outline: 2px solid $semantic-color-focus;
          outline-offset: -2px;
        }

        &--divider {
          border-bottom: $semantic-border-card-width solid $semantic-color-border-subtle;
          margin-bottom: $semantic-spacing-content-line-tight;
          padding-bottom: $semantic-spacing-content-line-tight;
        }
      }
    }

    &__form {
      min-width: 280px;

      .form-group {
        margin-bottom: $semantic-spacing-content-paragraph;

        &:last-child {
          margin-bottom: 0;
        }
      }

      label {
        display: block;
        font-size: $semantic-typography-font-size-sm;
        color: $semantic-color-text-primary;
        margin-bottom: $semantic-spacing-content-line-tight;
        font-weight: $semantic-typography-font-weight-medium;
      }

      input, textarea {
        width: 100%;
        padding: $semantic-spacing-component-sm;
        border: $semantic-border-card-width solid $semantic-color-border-primary;
        border-radius: $semantic-border-radius-sm;
        background: $semantic-color-surface-primary;
        color: $semantic-color-text-primary;
        font-size: $semantic-typography-font-size-sm;
        transition: border-color $semantic-motion-duration-fast $semantic-motion-easing-ease;

        &:focus {
          outline: none;
          border-color: $semantic-color-focus;
          box-shadow: 0 0 0 1px $semantic-color-focus;
        }

        &::placeholder {
          color: $semantic-color-text-tertiary;
        }
      }

      textarea {
        resize: vertical;
        min-height: 80px;
      }
    }

    &__card {
      min-width: 300px;
      max-width: 400px;

      .card-header {
        display: flex;
        align-items: center;
        gap: $semantic-spacing-content-list-item;
        margin-bottom: $semantic-spacing-content-list-item;

        .avatar {
          width: 40px;
          height: 40px;
          border-radius: $semantic-border-radius-full;
          background: $semantic-color-primary;
          color: $semantic-color-on-primary;
          display: flex;
          align-items: center;
          justify-content: center;
          font-weight: $semantic-typography-font-weight-semibold;
        }

        .user-info {
          .name {
            font-weight: $semantic-typography-font-weight-medium;
            font-size: $semantic-typography-font-size-md;
            color: $semantic-color-text-primary;
          }

          .role {
            font-size: $semantic-typography-font-size-xs;
            color: $semantic-color-text-secondary;
          }
        }
      }

      .card-content {
        font-size: $semantic-typography-font-size-sm;
        color: $semantic-color-text-secondary;
        line-height: $semantic-typography-line-height-relaxed;
        margin-bottom: $semantic-spacing-content-paragraph;
      }

      .card-actions {
        display: flex;
        gap: $semantic-spacing-content-list-item;

        button {
          flex: 1;
          padding: $semantic-spacing-component-xs $semantic-spacing-component-sm;
          border: $semantic-border-card-width solid $semantic-color-border-primary;
          border-radius: $semantic-border-radius-sm;
          background: $semantic-color-surface-primary;
          color: $semantic-color-text-primary;
          font-size: $semantic-typography-font-size-xs;
          cursor: pointer;
          transition: all $semantic-motion-duration-fast $semantic-motion-easing-ease;

          &:hover {
            background: $semantic-color-surface-secondary;
          }

          &.primary {
            background: $semantic-color-primary;
            color: $semantic-color-on-primary;
            border-color: $semantic-color-primary;

            &:hover {
              background: $semantic-color-primary-hover;
            }
          }
        }
      }
    }

    &__tooltip {
      max-width: 200px;
      font-size: $semantic-typography-font-size-xs;
      line-height: $semantic-typography-line-height-normal;
    }
  }

  // Responsive design
  @media (max-width: $semantic-breakpoint-md - 1) {
    &__grid {
      grid-template-columns: 1fr;
    }

    &__row {
      flex-direction: column;
      align-items: stretch;

      &--positions {
        grid-template-columns: 1fr;
        grid-template-rows: repeat(9, auto);
        gap: $semantic-spacing-component-sm;
        min-height: auto;
      }
    }

    &__position-top-start,
    &__position-top,
    &__position-top-end,
    &__position-left,
    &__position-center,
    &__position-right,
    &__position-bottom-start,
    &__position-bottom,
    &__position-bottom-end {
      grid-column: 1;
    }
  }
}