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

.error-container {
  width: 100%;
  margin-bottom: $CAP_SPACE_08;
  margin-top: -3.143rem;
  background-color: $CAP_COLOR_05;
  border-radius: $CAP_SPACE_04;
  padding: $CAP_SPACE_08 $CAP_SPACE_12 $CAP_SPACE_08 $CAP_SPACE_08;
  box-sizing: border-box;

  // New tabbed interface styles
  &--tabs {
    padding: 0.5rem 0.75rem;
  }
}

// Header with tabs and actions
.error-info-note {
  &__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    width: 100%;
  }

  &__tabs {
    flex: 1;
    
    // Override Ant Design Tabs styles
    .ant-tabs-nav {
      margin-bottom: 0;
      
      &::before {
        border-bottom: none;
      }
    }

    .ant-tabs-tab {
      padding: 0.5rem 0;
      margin-right: 1.5rem;
      color: $CAP_G03;
      font-size: 0.875rem;
      font-weight: $FONT_WEIGHT_MEDIUM;
      
      &:hover {
        color: $CAP_G01;
      }

      &.ant-tabs-tab-active {
        .ant-tabs-tab-btn {
          color: $CAP_G01;
          font-weight: 600;
        }
      }
    }

    .ant-tabs-ink-bar {
      background-color: $CAP_G01;
      height: 0.125rem;
    }

    .ant-tabs-content-holder {
      padding-top: 0.5rem;
    }
  }

  &__tab-label {
    display: flex;
    align-items: center;
    gap: 0.25rem;
  }

  &__tab-count {
    color: inherit;
  }

  &__actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
    padding-top: 0.5rem;
  }

  &__liquid-doc {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    color: $CAP_BLUE;
    font-size: 0.875rem;
    font-weight: $FONT_WEIGHT_MEDIUM;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0;

    &:hover {
      color: $CAP_BLUE01;
    }

    .cap-icon-v2 {
      margin-left: 0.25rem;
    }
  }

  &__close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    padding: 0;
    background: transparent;
    border: none;
    border-radius: 0.25rem;
    cursor: pointer;
    color: $CAP_G03;
    transition: all 0.2s ease;

    &:hover {
      background-color: rgba($CAP_G01, 0.1);
      color: $CAP_G01;
    }

    .anticon {
      font-size: 0.875rem;
    }
  }

  &__content {
    max-height: 12.5rem;
    overflow-y: auto;
    padding-right: 0.25rem;

    // Custom scrollbar
    &::-webkit-scrollbar {
      width: 0.375rem;
    }

    &::-webkit-scrollbar-track {
      background: transparent;
    }

    &::-webkit-scrollbar-thumb {
      background-color: $CAP_G06;
      border-radius: 0.1875rem;

      &:hover {
        background-color: $CAP_G04;
      }
    }
  }

  &__item {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    padding: 0.375rem 0;
    border-bottom: 1px solid rgba($CAP_G06, 0.3);

    &:last-child {
      border-bottom: none;
    }

    &--error {
      .error-info-note__icon--error {
        color: $CAP_RED;
      }
    }

    &--warning {
      .error-info-note__icon--warning {
        color: $CAP_YELLOW;
      }
    }
  }

  &__item-icon {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    padding-top: 0.125rem;
  }

  &__icon {
    font-size: 0.875rem;

    &--error {
      color: $CAP_RED;
    }
  }

  &__item-content {
    flex: 1;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.25rem;
    font-size: 0.75rem;
    line-height: 2;
    color: $CAP_G01;
  }

  &__item-message {
    color: $CAP_G01;
  }

  &__item-location {
    color: $CAP_G03;
    white-space: nowrap;
  }

  &__item-rule {
    color: $CAP_G04;
    font-family: monospace;
    font-size: 0.6875rem;
  }

  &__item-navigate {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.25rem;
    height: 1.25rem;
    padding: 0;
    background: transparent;
    border: none;
    border-radius: 0.25rem;
    cursor: pointer;
    color: $CAP_G04;
    transition: all 0.2s ease;

    &:hover {
      background-color: rgba($CAP_G01, 0.1);
      color: $CAP_G01;
    }

    .anticon {
      font-size: 0.75rem;
    }
  }
}

// Legacy styles (kept for backwards compatibility)
.error-header {
  width: 100%;
  height: $CAP_SPACE_32;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  font-weight: $FONT_WEIGHT_MEDIUM;

  .ant-btn.cap-button-v2.flat-btn {
    display: flex;
    margin-left: auto;
    background-color: inherit;
    align-items: center;
  }

  .warning-icon {
    vertical-align: text-top;
    margin-right: $CAP_SPACE_04;
  }
}

.standard-error-header {
  justify-content: flex-start;
}

.error-list {
  overflow: scroll;
  max-height: $CAP_SPACE_80;
  padding: 0;

  &.ant-list.cap-list-v2.ant-list-split .ant-list-item {
    padding-top: $CAP_SPACE_04;
    padding-bottom: $CAP_SPACE_04;
    border-bottom: 0;
  }

  &.ant-list .ant-list-item:last-child {
    border-bottom: none;
  }

  .cap-list-v2-error-item {
    color: $CAP_G01;
    font-size: $CAP_SPACE_12;
    display: flex;
    margin-left: $CAP_SPACE_04;
    gap: $CAP_SPACE_04;
  }
}

// Legacy error list for platform-specific errors
.error-list-legacy {
  max-height: 10rem;
  overflow-y: auto;
  padding: 0;

  &__item {
    padding: $CAP_SPACE_04 0;
  }

  .cap-list-v2-error-item {
    color: $CAP_G01;
    font-size: $CAP_SPACE_12;
    display: flex;
    margin-left: $CAP_SPACE_04;
    gap: $CAP_SPACE_04;
  }
}

.liquid-divider {
  &.ant-divider.cap-divider-v2 {
    background: $FONT_COLOR_04;
  }
  margin: $CAP_SPACE_08 0;
}

.platform-divider {
  &.ant-divider.cap-divider-v2 {
    background: $FONT_COLOR_04;
    margin: $CAP_SPACE_12 0;
  }
}

.aria-error-footer {
  display: flex;
  align-items: center;
  gap: $CAP_SPACE_04;
}

.error-header-sub-title {
  margin-left: $CAP_SPACE_04;
  font-weight: $FONT_WEIGHT_MEDIUM;
}

// Responsive adjustments
@media (max-width: 768px) {
  .error-info-note {
    &__tabs {
      .ant-tabs-tab {
        margin-right: 1rem;
        font-size: 0.8125rem;
      }
    }

    &__content {
      max-height: 10rem;
    }

    &__item-content {
      font-size: 0.6875rem;
    }
  }
}
