/*
Copyright 2021 Q-CTRL. All rights reserved.

Licensed under the Q-CTRL Terms of service (the "License"). Unauthorized
copying or use of this file, via any medium, is strictly prohibited.
Proprietary and confidential. You may not use this file except in compliance
with the License. You may obtain a copy of the License at

     https://q-ctrl.com/terms

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS. See the
License for the specific language.
*/
const _ = require("lodash");

const plugin = require("tailwindcss/plugin");

const {
  none
} = require("../../tokens/boxShadow"); // Highlighting


module.exports = function ({
  addComponents,
  theme
}) {
  const buttons = {
    ".btn, .markdown .btn": {
      display: "inline-flex",
      position: "relative",
      alignItems: "center",
      padding: "theme('borderSquash.md')",
      textAlign: "center",
      whiteSpace: "nowarp",
      verticalAlign: "middle",
      "-webkit-user-select": "none",
      "-ms-user-select": "none",
      "user-select": "none",
      fontWeight: theme("fontWeight.normal"),
      fontSize: theme("fontSize.base"),
      letterSpacing: theme("letterSpacing.loose"),
      lineHeight: theme("lineHeight.sm"),
      border: `1px solid ${theme("colors.transparent")}`,
      borderRadius: theme("borderRadius.DEFAULT"),
      boxShadow: theme("boxShadow.xs"),
      "transition-property": "background-color, border-color, color, fill, stroke, opacity, box-shadow, transform",
      "transition-timing-function": theme("transitionTimingFunction.ease-in-out"),
      "transition-duration": theme("transitionDuration.150"),
      "&:not(:disabled):not(.disabled)": {
        cursor: "pointer"
      },
      "&:hover": {
        boxShadow: theme("boxShadow.lg")
      },
      '&:active, &[aria-pressed="true"], &:disabled, &.disabled': {
        boxShadow: theme("boxShadow.none")
      },
      "&:focus": {
        "--tw-ring-opacity": "0.25",
        "--tw-ring-color": "rgba(233, 231, 234, var(--tw-ring-opacity))",
        boxShadow: "var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000)",
        outline: "2px solid transparent",
        "outline-offset": "2px"
      },
      "&:disabled, &.disabled": {
        opacity: theme("opacity.65"),
        cursor: "not-allowed"
      },
      "&.disabled, fieldset:disabled &": {
        "pointer-events": "none"
      }
    },
    // Button Styles
    ".btn-square, .btn-rounded, .markdown  .btn-square, .markdown  .btn-rounded": {
      letterSpacing: theme("letterSpacing.normal"),
      float: "none"
    },
    ".btn-rounded, .markdown .btn-rounded": {
      borderRadius: theme("borderRadius.full")
    },
    '.btn-link, .markdown .btn-link, .btn-link:hover, .markdown .btn-link:hover, .btn-link:active, .markdown .btn-link:active, .btn-link[aria-pressed="true"] .markdown .btn-link[aria-pressed="true"], .btn-link:disabled .markdown .btn-link:disabled, .btn-link.disabled, .markdown .btn-link.disabled': {
      backgroundColor: theme("colors.transparent"),
      borderWidth: 0,
      boxShadow: theme("boxShadow.none"),
      color: theme("colors.primary.DEFAULT"),
      "&:hover": {
        color: theme("colors.primary.DEFAULT")
      },
      '&:active, &[aria-pressed="true"]': {
        color: theme("colors.primary.dark")
      }
    },
    // Button Sizes
    ".btn-xs, .markdown .btn-xs": {
      fontSize: theme("fontSize.xs"),
      lineHeight: theme("lineHeight.2xs"),
      padding: theme("borderSquash.xs"),
      letterSpacing: "0.02rem",
      svg: {
        width: theme("iconSize.xs"),
        height: theme("iconSize.xs")
      },
      ".float-right": {
        margin: `0 0 0 ${theme("inline.xs")}`
      },
      "&:after": {
        content: '""',
        display: "table",
        clear: "both"
      },
      "&.btn-square, &.btn-rounded": {
        padding: theme("borderFrame.2xs"),
        fontSize: theme("iconSize.xs"),
        lineHeight: theme("iconSize.xs")
      }
    },
    ".btn-sm, .markdown .btn-sm": {
      fontSize: theme("fontSize.sm"),
      lineHeight: theme("lineHeight.xs"),
      padding: theme("borderSquash.sm"),
      letterSpacing: "0.02rem",
      svg: {
        width: theme("iconSize.sm"),
        height: theme("iconSize.sm")
      },
      ".float-right": {
        margin: `0 0 0 ${theme("inline.xs")}`
      },
      "&.btn-square, &.btn-rounded": {
        padding: theme("borderFrame.2xs"),
        fontSize: theme("iconSize.sm"),
        lineHeight: theme("iconSize.sm")
      }
    },
    ".btn-md, .markdown .btn-md": {
      fontSize: theme("fontSize.base"),
      lineHeight: theme("lineHeight.sm"),
      padding: theme("borderSquash.md"),
      letterSpacing: "0.02rem",
      svg: {
        width: theme("iconSize.md"),
        height: theme("iconSize.md")
      },
      ".float-right": {
        margin: `0 0 0 ${theme("inline.sm")}`
      },
      "&.btn-square, &.btn-rounded": {
        padding: theme("borderFrame.2xs"),
        fontSize: theme("iconSize.md"),
        lineHeight: theme("iconSize.md")
      }
    },
    ".btn-lg, .markdown .btn-lg": {
      fontSize: theme("fontSize.base"),
      lineHeight: theme("lineHeight.sm"),
      padding: theme("borderSquash.lg"),
      letterSpacing: "0.02rem",
      svg: {
        width: theme("iconSize.md"),
        height: theme("iconSize.md")
      },
      ".float-right": {
        margin: `0 0 0 ${theme("inline.sm")}`
      },
      "&.btn-square, &.btn-rounded": {
        padding: theme("borderFrame.xs"),
        fontSize: theme("iconSize.md"),
        lineHeight: theme("iconSize.md")
      }
    },
    ".btn-xl, .markdown .btn-xl": {
      fontSize: theme("fontSize.lg"),
      lineHeight: theme("lineHeight.lg"),
      padding: theme("borderSquash.xl"),
      letterSpacing: "0.01rem",
      svg: {
        width: theme("iconSize.md"),
        height: theme("iconSize.md")
      },
      ".float-right": {
        margin: `0 0 0 ${theme("inline.sm")}`
      },
      "&.btn-square, &.btn-rounded": {
        padding: theme("borderFrame.sm"),
        fontSize: theme("iconSize.md"),
        lineHeight: theme("iconSize.md")
      }
    },
    // Button Colors
    ".btn-light, .markdown .btn-light": {
      backgroundColor: theme("colors.gray.100"),
      borderColor: theme("colors.gray.100"),
      "&, svg": {
        color: theme("colors.gray.700")
      }
    },
    ".btn-outline-light, .markdown .btn-outline-light": {
      color: theme("colors.gray.100"),
      backgroundColor: theme("colors.transparent"),
      borderColor: theme("colors.gray.100"),
      boxShadow: theme("boxShadow.none"),
      svg: {
        color: theme("colors.gray.0")
      }
    },
    ".btn-light, .btn-outline-light, .markdown .btn-light, .markdown .btn-outline-light": {
      "&:focus": {
        "--tw-ring-opacity": "1",
        "--tw-ring-color": "rgba(233, 231, 234, var(--tw-ring-opacity))"
      },
      "&:hover": {
        backgroundColor: theme("colors.white"),
        borderColor: theme("colors.white"),
        "&, svg": {
          color: theme("colors.gray.700")
        }
      },
      '&:active, &[aria-pressed="true"]': {
        backgroundColor: theme("colors.gray.200"),
        borderColor: theme("colors.gray.200"),
        "&, svg": {
          color: theme("colors.gray.700")
        }
      }
    },
    ".btn-primary, .markdown .btn-primary": {
      backgroundColor: theme("colors.primary.DEFAULT"),
      borderColor: theme("colors.primary.DEFAULT"),
      "&, svg": {
        color: theme("colors.white")
      }
    },
    ".btn-outline-primary, .markdown .btn-outline-primary": {
      backgroundColor: theme("colors.transparent"),
      borderColor: theme("colors.primary.DEFAULT"),
      boxShadow: theme("boxShadow.none"),
      "&, svg": {
        color: theme("colors.primary.DEFAULT")
      }
    },
    ".btn-primary, .btn-outline-primary, .markdown .btn-primary, .markdown .btn-outline-primary": {
      "&:focus": {
        "--tw-ring-opacity": "1",
        "--tw-ring-color": "rgba(239, 228, 255, var(--tw-ring-opacity))"
      },
      "&:not(:disabled):not(.disabled)": {
        "&:hover": {
          backgroundColor: theme("colors.violet.400"),
          borderColor: theme("colors.violet.400"),
          "&, svg": {
            color: theme("colors.white")
          }
        },
        '&:active, &[aria-pressed="true"]': {
          backgroundColor: theme("colors.violet.600"),
          borderColor: theme("colors.violet.600"),
          "&, svg": {
            color: theme("colors.white")
          }
        }
      }
    },
    ".btn-secondary, .markdown .btn-secondary": {
      backgroundColor: theme("colors.violet.900"),
      borderColor: theme("colors.violet.900"),
      "&, svg": {
        color: theme("colors.white")
      }
    },
    ".btn-outline-secondary, .markdown .btn-outline-secondary": {
      backgroundColor: theme("colors.transparent"),
      borderColor: theme("colors.violet.900"),
      boxShadow: theme("boxShadow.none"),
      "&, svg": {
        color: theme("colors.violet.900")
      }
    },
    ".btn-secondary, .markdown .btn-secondary, .btn-outline-secondary, .markdown .btn-outline-secondary": {
      "&:focus": {
        "--tw-ring-opacity": "1",
        "--tw-ring-color": "rgba(233, 231, 234, var(--tw-ring-opacity))"
      },
      "&:not(:disabled):not(.disabled)": {
        "&:hover": {
          backgroundColor: theme("colors.violet.800"),
          borderColor: theme("colors.violet.800"),
          "&, svg": {
            color: theme("colors.white")
          }
        },
        '&:active, &[aria-pressed="true"]': {
          backgroundColor: theme("colors.black"),
          borderColor: theme("colors.black"),
          "&, svg": {
            color: theme("colors.white")
          }
        }
      }
    },
    ".btn-info, .markdown .btn-info": {
      backgroundColor: theme("colors.blue.300"),
      borderColor: theme("colors.blue.300"),
      "&, svg": {
        color: theme("colors.blue.700")
      }
    },
    ".btn-outline-info, .markdown .btn-outline-info": {
      backgroundColor: theme("colors.transparent"),
      borderColor: theme("colors.blue.300"),
      boxShadow: theme("boxShadow.none"),
      "&, svg": {
        color: theme("colors.blue.300")
      }
    },
    ".btn-info, .markdown .btn-info, .btn-outline-info, .markdown .btn-outline-info": {
      "&:focus": {
        "--tw-ring-opacity": "1",
        "-tw-ring-color": "rgba(194, 235, 253, var(--tw-ring-opacity))"
      },
      "&:not(:disabled):not(.disabled)": {
        "&:hover": {
          backgroundColor: theme("colors.blue.200"),
          borderColor: theme("colors.blue.200"),
          "&, svg": {
            color: theme("colors.blue.700")
          }
        },
        '&:active, &[aria-pressed="true"]': {
          backgroundColor: theme("colors.blue.400"),
          borderColor: theme("colors.blue.400"),
          "&, svg": {
            color: theme("colors.blue.700")
          }
        }
      }
    },
    ".btn-success, .markdown .btn-success": {
      backgroundColor: theme("colors.green.300"),
      borderColor: theme("colors.green.300"),
      "&, svg": {
        color: theme("colors.green.700")
      }
    },
    ".btn-outline-success, .markdown .btn-outline-success": {
      backgroundColor: theme("colors.transparent"),
      borderColor: theme("colors.green.400"),
      boxShadow: theme("boxShadow.none"),
      "&, svg": {
        color: theme("colors.green.400")
      }
    },
    ".btn-success, .markdown .btn-success, .btn-outline-success, .markdown .btn-outline-success": {
      "&:focus": {
        "--tw-ring-opacity": "1",
        "--tw-ring-color": "rgba(192, 248, 190, var(--tw-ring-opacity))"
      },
      "&:not(:disabled):not(.disabled)": {
        "&:hover": {
          backgroundColor: theme("colors.green.200"),
          borderColor: theme("colors.green.200"),
          "&, svg": {
            color: theme("colors.green.700")
          }
        },
        '&:active, &[aria-pressed="true"]': {
          backgroundColor: theme("colors.green.400"),
          borderColor: theme("colors.green.400"),
          "&, svg": {
            color: theme("colors.green.700")
          }
        }
      }
    },
    ".btn-warning, .markdown .btn-warning": {
      backgroundColor: theme("colors.yellow.300"),
      borderColor: theme("colors.yellow.300"),
      "&, svg": {
        color: theme("colors.yellow.700")
      }
    },
    ".btn-outline-warning, .markdown .btn-outline-warning": {
      backgroundColor: theme("colors.transparent"),
      borderColor: theme("colors.yellow.400"),
      boxShadow: theme("boxShadow.none"),
      "&, svg": {
        color: theme("colors.yellow.400")
      }
    },
    ".btn-warning, .markdown .btn-warning, .btn-outline-warning, .markdown .btn-outline-warning": {
      "&:focus": {
        "--tw-ring-opacity": "1",
        "--tw-ring-color": "rgba(249, 240, 191, var(--tw-ring-opacity))"
      },
      "&:not(:disabled):not(.disabled)": {
        "&:hover": {
          backgroundColor: theme("colors.yellow.200"),
          borderColor: theme("colors.yellow.200"),
          "&, svg": {
            color: theme("colors.yellow.700")
          }
        },
        '&:active, &[aria-pressed="true"]': {
          backgroundColor: theme("colors.yellow.400"),
          borderColor: theme("colors.yellow.400"),
          "&, svg": {
            color: theme("colors.yellow.700")
          }
        }
      }
    },
    ".btn-danger, .markdown .btn-danger": {
      backgroundColor: theme("colors.red.300"),
      borderColor: theme("colors.red.300"),
      "&, svg": {
        color: theme("colors.red.700")
      }
    },
    ".btn-outline-danger, .markdown .btn-outline-danger": {
      backgroundColor: theme("colors.transparent"),
      borderColor: theme("colors.red.400"),
      boxShadow: theme("boxShadow.none"),
      "&, svg": {
        color: theme("colors.red.400")
      }
    },
    ".btn-danger, .markdown .btn-danger, .btn-outline-danger, .markdown .btn-outline-danger": {
      "&:focus": {
        "--tw-ring-opacity": "1",
        "--tw-ring-color": "rgba(253, 194, 196, var(--tw-ring-opacity))"
      },
      "&:not(:disabled):not(.disabled)": {
        "&:hover": {
          backgroundColor: theme("colors.red.200"),
          borderColor: theme("colors.red.200"),
          "&, svg": {
            color: theme("colors.red.700")
          }
        },
        '&:active, &[aria-pressed="true"]': {
          backgroundColor: theme("colors.red.400"),
          borderColor: theme("colors.red.400"),
          "&, svg": {
            color: theme("colors.red.700")
          }
        }
      }
    }
  };
  addComponents([buttons], {
    variants: ["responsive"]
  });
};