@use './ant-design-components/ant-radio.scss' as *;
@use './ant-design-components/ant-alert.scss' as *;
@use './ant-design-components/ant-input-number.scss' as *;
@use './ant-design-components/ant-input-text.scss' as *;
@use './ant-design-components/ant-select.scss' as *;
@use './ant-design-components/ant-date-picker.scss' as *;
// @use './ant-design-components/ant-form.scss' as *;

/* Disable ALL transitions & animations while theme switching */
html.theme-transition-off *,
html.theme-transition-off *::before,
html.theme-transition-off *::after {
  transition: none !important;
  animation: none !important;
}

body {
  @apply bg-nc-bg-default text-[var(--color-text)];
}

.ant-layout-content {
  @apply !bg-nc-bg-default;
}

// Dropdown
.ant-dropdown {
  @apply !bg-nc-bg-default text-nc-content-gray;
}

.ant-tabs-dropdown-menu {
  @apply bg-nc-bg-default text-nc-content-gray;
}

// Drawer & Modal
.ant-drawer-content,
.ant-modal-content,
.ant-modal-header,
.ant-card {
  @apply !bg-nc-bg-default;
}

.ant-modal-footer {
  @apply border-t-nc-border-gray-medium;
}

.ant-drawer,
.ant-modal,
.ant-card {
  @apply text-nc-content-gray;
}

// Dropdown Menu
.ant-dropdown-menu.ant-dropdown-menu-root,
.ant-dropdown-menu.ant-dropdown-menu-sub {
  @apply !bg-nc-bg-default !text-nc-content-gray;

  .ant-dropdown-menu-item {
    &:not(.ant-dropdown-menu-item-disabled) {
      @apply hover:text-nc-content-gray-extreme text-nc-content-gray-subtle;
    }
  }
}

.ant-dropdown-menu-submenu.ant-dropdown-menu-submenu-disabled .ant-dropdown-menu-submenu-title {
  @apply !bg-nc-bg-default !text-nc-content-gray-disabled;
}

.ant-dropdown-menu-submenu.ant-dropdown-menu-submenu-popup {
  @apply border-nc-border-gray-medium;
}

.ant-collapse-content {
  @apply bg-nc-bg-default text-nc-content-gray;
}

.ant-popover-inner,
.ant-popover-arrow-content {
  @apply bg-nc-bg-default;
}

.ant-dropdown-menu-item,
.ant-dropdown-menu-submenu-title {
  &:not(.ant-dropdown-menu-item-disabled):not(.dropdown-menu-submenu-title-disabled) {
    color: rgba(var(--rgb-base), 0.85);

    &:hover {
      @apply bg-nc-bg-gray-light;
    }
  }
}

// ant select
.ant-select-item-group {
  @apply text-nc-content-gray-muted;
}

.ant-select-clear {
  @apply rounded-full flex children:flex-none;
  color: rgba(var(--rgb-base), 0.25);
  background: var(--nc-bg-default);
}

.ant-select-clear:hover {
  color: rgba(var(--rgb-base), 0.45);
}

.ant-select:not(.ant-select-customize-input) .ant-select-selector {
  @apply border-nc-border-gray-medium;
}

.ant-form,
.ant-form-item,
.ant-radio-wrapper,
.ant-radio-group,
.ant-list-item {
  color: rgba(var(--rgb-base), 0.85);
}

.ant-list-empty-text,
.ant-radio-disabled + span {
  @apply text-nc-content-gray-muted;
}

// ant tabs
.ant-tabs-tab-btn:active,
.ant-tabs-tab-btn:focus,
.ant-tabs-tab-remove:active,
.ant-tabs-tab-remove:focus,
.ant-tabs-tab.ant-tabs-tab-active .ant-tabs-tab-btn {
  --tw-bg-opacity: 1;
  color: rgba(var(--rgb-color-brand-500), var(--tw-bg-opacity));
}

.ant-tabs-ink-bar {
  background: rgb(var(--rgb-color-brand-500));
}

.ant-progress-text {
  color: rgba(var(--rgb-base), 0.85);
}

.ant-form-item {
  &.nc-force-layout-vertical {
    @apply !flex-col;

    & > .ant-form-item-label {
      @apply pb-2 text-left;

      &::after {
        @apply hidden;
      }

      & > label {
        @apply !h-auto;
        &::after {
          @apply !hidden;
        }
      }
    }
  }

  &.nc-force-layout-horizontal {
    @apply !flex-row !items-center;

    & > .ant-form-item-label {
      @apply pb-0 items-center;

      &::after {
        @apply content-[':'] !mr-2 !ml-0.5 relative top-[0.5px];
      }
    }
  }
}

// Fix: Ant Design overrides vertical form layout at max-width 575px with flex-wrap: wrap,
// flex: 0 0 100%, and label padding — which breaks flex-direction: column.
// Re-enforce vertical layout on small screens.
@media (max-width: 575px) {
  .ant-form-vertical .ant-form-item {
    flex-direction: column;
    flex-wrap: nowrap;
  }

  .ant-form-vertical.ant-form .ant-form-item .ant-form-item-label,
  .ant-form-vertical.ant-form .ant-form-item .ant-form-item-control {
    flex: unset;
    max-width: unset;
  }
}

/* windicss layer base */
@layer base {
  [theme='dark'] {
    [type='text'],
    [type='email'],
    [type='url'],
    [type='password'],
    [type='number'],
    [type='date'],
    [type='datetime-local'],
    [type='month'],
    [type='search'],
    [type='tel'],
    [type='time'],
    [type='week'],
    [multiple],
    textarea,
    select {
      @apply bg-nc-bg-default border-nc-border-gray-medium;
    }

    [type='checkbox'],
    [type='radio'] {
      @apply bg-nc-bg-default border-nc-border-gray-medium;
    }

    [type='checkbox']:focus,
    [type='radio']:focus {
      @apply border-nc-border-gray-medium;
    }

    *,
    ::before,
    ::after {
      @apply border-nc-border-gray-medium;
    }

    * {
      --tw-ring-offset-color: var(--nc-bg-default);
    }

    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
      color: rgba(var(--rgb-base), 0.85);
    }

    .ant-btn-text {
      color: rgba(var(--rgb-base), 0.85);

      &:focus,
      &:hover {
        color: rgba(var(--rgb-base), 0.85);
        background-color: rgba(var(--rgb-base), 0.018);
      }
    }

    // Ant rate
    .ant-rate-star-first,
    .ant-rate-star-second {
      @apply text-nc-bg-gray-medium;
    }

    .ant-card-bordered {
      @apply border-nc-border-gray-medium;
    }

    .ant-upload.ant-upload-drag {
      &:not(:disabled) {
        @apply border-nc-border-gray-medium;
      }
    }

    .ant-checkbox-disabled + span {
      @apply text-nc-content-gray-disabled;
    }

    // Checkbox
    .ant-checkbox {
      color: rgba(var(--rgb-base), 0.85);
    }
    .ant-checkbox-wrapper:hover .ant-checkbox-inner,
    .ant-checkbox:hover .ant-checkbox-inner,
    .ant-checkbox-input:focus + .ant-checkbox-inner {
      border-color: var(--ant-primary-color);
    }
    .ant-checkbox-inner {
      background-color: var(--nc-bg-default);
      border: 1px solid var(--nc-border-gray-medium);
    }
    .ant-checkbox-checked .ant-checkbox-inner {
      background-color: var(--ant-primary-color);
      border-color: var(--ant-primary-color);
    }
    .ant-checkbox-disabled.ant-checkbox-checked .ant-checkbox-inner::after {
      border-color: rgba(var(--rgb-base), 0.25);
    }
    .ant-checkbox-disabled .ant-checkbox-inner {
      background-color: var(--nc-bg-gray-medium);
      border-color: var(--nc-bg-gray-dark) !important;
    }
    .ant-checkbox-disabled .ant-checkbox-inner::after {
      border-color: var(--nc-bg-gray-extra-dark);
    }
    .ant-checkbox-disabled + span {
      color: rgba(var(--rgb-base), 0.25);
    }
    .ant-checkbox-wrapper {
      color: rgba(var(--rgb-base), 0.85);
    }
    .ant-checkbox-group {
      color: rgba(var(--rgb-base), 0.85);
    }
    .ant-checkbox-indeterminate .ant-checkbox-inner {
      background-color: var(--nc-bg-default);
      border-color: var(--nc-border-gray-medium);
    }
    .ant-checkbox-indeterminate .ant-checkbox-inner::after {
      background-color: var(--ant-primary-color);
    }
    .ant-checkbox-indeterminate.ant-checkbox-disabled .ant-checkbox-inner::after {
      background-color: rgba(var(--rgb-base), 0.25);
      border-color: rgba(var(--rgb-base), 0.25);
    }
  }
}

// Dark theme specific style
[theme='dark'] {
  ::-moz-selection {
    background-color: #3366ff40;
  }
  ::selection {
    background-color: #3366ff40;
  }

  /* Change autocomplete styles in WebKit */
  input:-webkit-autofill:not([type='checkbox']):not([type='radio']),
  input:-webkit-autofill:hover:not([type='checkbox']):not([type='radio']),
  input:-webkit-autofill:focus:not([type='checkbox']):not([type='radio']),
  textarea:-webkit-autofill,
  textarea:-webkit-autofill:hover,
  textarea:-webkit-autofill:focus,
  select:-webkit-autofill,
  select:-webkit-autofill:hover,
  select:-webkit-autofill:focus {
    -webkit-text-fill-color: var(--nc-content-gray);
  }

  input:not([type='checkbox']):not([type='radio']),
  textarea,
  .ant-input-affix-wrapper,
  .ant-input-number {
    &:not(.ant-select-selection-search-input) {
      @apply placeholder-nc-content-gray-disabled;

      &:not(:disabled):not(:-webkit-autofill) {
        @apply !bg-transparent text-nc-content-gray;
      }
    }
  }

  .ant-input-affix-wrapper {
    &:not(:focus):not(:active):not(.ant-input-affix-wrapper-focused) {
      @apply border-nc-border-gray-medium;
    }

    .anticon {
      @apply text-nc-content-gray-subtle;
    }
  }

  // Divider
  .ant-divider {
    @apply border-nc-border-gray-light;
  }

  .ant-empty-normal {
    @apply text-nc-content-inverted-secondary;
  }

  .ant-empty {
    .ant-empty-img-simple {
      /* Ellipse shadow */
      .ant-empty-img-simple-ellipse {
        fill: #262626 !important;
      }

      /* Outline stroke */
      .ant-empty-img-simple-g {
        stroke: #4d4d4d !important;
      }

      /* Inner shape fill */
      .ant-empty-img-simple-path {
        fill: #1f1f1f !important;
      }
    }

    .ant-empty-img-default {
      .ant-empty-img-default-ellipse {
        fill: #fff;
        fill-opacity: 0.08;
      }

      .ant-empty-img-default-path-1 {
        fill: #262626;
      }

      .ant-empty-img-default-path-3 {
        fill: #595959;
      }

      .ant-empty-img-default-path-4 {
        fill: #434343;
      }

      .ant-empty-img-default-path-5 {
        fill: #595959;
      }

      .ant-empty-img-default-g {
        fill: #434343;
      }
    }
  }

  // Dropdown Menu
  .ant-dropdown-menu.ant-dropdown-menu-root,
  .ant-dropdown-menu.ant-dropdown-menu-sub {
    .ant-dropdown-menu-item {
      &.ant-dropdown-menu-item-disabled {
        @apply !text-nc-content-gray-disabled hover:bg-transparent;
      }

      &:not(.ant-dropdown-menu-item-disabled) {
        @apply hover:(bg-nc-bg-gray-light text-nc-content-gray-extreme) text-nc-content-gray;

        .ant-dropdown-menu-submenu-title {
          @apply hover:bg-nc-bg-gray-light;
        }
      }
    }
  }
  .ant-tabs-dropdown-menu.ant-tabs-dropdown-menu-root {
    .ant-tabs-dropdown-menu-item {
      &.ant-tabs-dropdown-menu-item-disabled {
        @apply !text-nc-content-gray-disabled hover:bg-transparent;
      }

      &:not(.ant-tabs-dropdown-menu-item-disabled) {
        @apply hover:(bg-nc-bg-gray-light text-nc-content-gray-extreme) text-nc-content-gray;

        .ant-dropdown-menu-submenu-title {
          @apply hover:bg-nc-bg-gray-light;
        }
      }
    }
  }

  .ant-menu {
    @apply bg-nc-bg-default text-nc-content-gray;

    &:not(.ant-menu-item-disabled) {
      @apply hover:(text-nc-content-gray-extreme);
    }
  }

  // Tabs
  .ant-tabs {
    @apply text-nc-content-gray;
  }

  .ant-tabs-bottom > .ant-tabs-nav:before,
  .ant-tabs-bottom > div > .ant-tabs-nav:before,
  .ant-tabs-top > .ant-tabs-nav:before,
  .ant-tabs-top > div > .ant-tabs-nav:before {
    @apply border-nc-border-gray-medium;
  }

  // Form item label
  .ant-form-item-label > label {
    @apply text-nc-content-gray;
  }

  // Modal
  .ant-modal-content {
    @apply border-1 border-solid border-nc-border-gray-medium;
  }

  // Ant design Breadcrumb
  .ant-breadcrumb {
    color: rgba(var(--rgb-base), 0.85);

    a {
      color: rgba(var(--rgb-base), 0.45);
    }

    .ant-breadcrumb-separator {
      color: rgba(var(--rgb-base), 0.45);
    }

    & > span:last-child,
    & > span:last-child a {
      color: rgba(var(--rgb-base), 0.85);
    }
  }

  // Sidebar
  .nc-home-create-new-btn,
  .nc-sidebar-item-dark {
    @apply !hover:bg-nc-bg-gray-medium;

    &.active {
      @apply !bg-nc-bg-gray-medium !hover:bg-nc-bg-gray-medium;
    }
  }

  .ant-modal-close-x {
    @apply text-nc-content-gray-subtle;
  }

  .ant-dropdown-button {
    .ant-btn {
      @apply bg-nc-bg-default border-nc-border-gray-medium;
    }
  }

  .zendesk-icon-path {
    fill: #4fd1c5;
  }
}