@use "sass:string";
@use "../palette/palette.module.scss" as palette;

/**
 * Global Ant Design styles for Fides applications
 * These styles handle cases where tokens are not available
 */

/**
  * Chakra removes heading font weight, wheras Ant assumes browser defaults.
  * This sets the font weight for headings back to the browser default for Ant support.
  * Remove this once Chakra has been removed.
 */
h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: bold;
}

/**
 * Adds the color variables from the palette to the root element
 */
:root {
  @each $color, $value in palette.$colors {
    #{palette.getPrefixedColor("--fidesui-", string.unquote($color))}: $value;
  }
}

:focus-visible {
  outline-color: var(--fidesui-minos);
}

/**
  * Styles for Ant components where tokens are not available
  */
.ant-input-compact-item.ant-input-css-var {
  --ant-color-border: var(--fidesui-neutral-200);
  --ant-input-hover-border-color: var(--fidesui-neutral-200);
}

.ant-btn-compact-item.ant-btn-variant-outlined {
  --ant-button-default-border-color: var(--fidesui-neutral-200);
  --ant-button-default-hover-border-color: var(--fidesui-neutral-200);
  --ant-button-default-hover-bg: var(--fidesui-neutral-200);
  --ant-button-default-bg: var(--fidesui-neutral-50);
}

.ant-btn-icon {
  // fixes misalignment of Carbon icons in buttons
  line-height: 1;
}

// Input labels should have a font weight of 600
.ant-form-item-label {
  font-weight: 600;
}

// Custom styles for dark submenus
.ant-menu-dark .ant-menu-sub {
  > .ant-menu-item {
    > .ant-menu-title-content a {
      color: var(--fidesui-neutral-200);

      &:focus-visible {
        text-decoration: underline;
      }
    }

    &:focus-within:not(.ant-menu-item-selected) {
      background-color: var(--fidesui-neutral-800);
    }

    &:hover {
      --ant-menu-dark-item-hover-bg: var(--fidesui-neutral-800);
    }
  }

  // The selected submenu item should be dark, because the background is light
  // But using the token "darkItemSelectedColor" also affect the group title,
  // therefore we need this css rule
  > .ant-menu-item.ant-menu-item-selected > .ant-menu-title-content a {
    color: var(--fidesui-minos);
  }
}

.ant-menu {
  .ant-menu-submenu-arrow {
    // Remove rounding from submenu arrow
    // to better match the style Carbon icons
    --ant-border-radius: 0px;

    // fix missing pixel in the arrow icon
    // (it's the same width as ant only changing 0.6 to 0.65 here)
    &::before,
    &::after {
      width: calc(calc(var(--ant-font-size) / 7 * 5) * 0.65);
    }
  }

  &.ant-menu-horizontal .ant-menu-item:first-child {
    padding-left: 0;

    &::after {
      inset-inline-start: 0;
    }
  }
}

.ant-input {
  // Read-only inputs should have a light background, neutral 700 text and no hover/active styles
  &:read-only {
    --ant-color-text: var(--fidesui-neutral-700);
    --ant-color-bg-container: var(--fidesui-neutral-50);
    --ant-input-hover-bg: var(--fidesui-neutral-50);
    --ant-input-active-bg: var(--fidesui-neutral-50);

    --ant-input-active-border-color: var(--ant-color-border);
    --ant-input-hover-border-color: var(--ant-color-border);
    --ant-input-active-shadow: none;
    --ant-input-hove-shadow: none;
  }
}

.ant-steps-item-title {
  font-weight: 500;
}

.ant-table-wrapper .ant-table {
  --ant-table-header-icon-color: var(--fidesui-neutral-300);
}

/*
  This is to match the font size of the table cells when other Ant components are used in a cell component (eg. Text, Link, List, etc.).
*/
.ant-table-cell * {
  --ant-font-size: var(--ant-table-cell-font-size-sm);
}

.ant-list {
  * {
    // Ant inappropriately removes outline from everything in the list
    // This breaks the focus outline for links and buttons in the list,
    // which causes accessibility issues for non-mouse users.
    // This restores the outline for focusable elements.
    &:focus-visible {
      outline: auto;
    }
  }

  // By default, Ant transitions from text color to primary color on
  // hover of list title links. Since our text color and primary color
  // are the same, it breaks the hover state. This fixes it.
  // Unfortunately, this level of specificity is required since it's the
  // level of specificity that Ant uses.
  .ant-list-item .ant-list-item-meta .ant-list-item-meta-title > a,
  .ant-list-item-meta-title a {
    &:hover,
    &:focus-visible {
      color: var(--fidesui-neutral-600);
    }
  }
}

.ant-select-dropdown {
  & .ant-select-item-group {
    font-weight: 600;
    font-size: var(--ant-select-option-font-size);
    color: var(--ant-color-text);
    border-radius: 0;

    &:not(:first-child) {
      border-top: 1px solid var(--ant-color-border);
    }
  }
}

/**
 * Using rounded edges for Ant Progress Component with steps
 */
.ant-progress-steps-item {
  border-radius: calc(var(--ant-progress-line-border-radius) / 40);
}

.ant-tree .ant-tree-node-content-wrapper {
  white-space: nowrap;
}

.ant-list .ant-list-item .ant-list-item-action li {
  padding-left: 0;
}

.ant-list-item-action-split {
  display: none;
}
