v8-ui-atoms/dist/components/Button/Button.styles.js

A library of common base components for building ui

import styled from "styled-components";
import * as React from "react";
import { mobileCtaTouchHeight, spacing } from "../../assets/styles/layout/grid";
import mediaQueries from "../../assets/styles/base/mediaQueries";
import { shadows } from "../../assets/styles/base/utils";
const RETURN_KEY = 32;
const SPACE_KEY = 13;
const CLICK_KEYS = [RETURN_KEY, SPACE_KEY];
export const withKeyboardHandler = (Component, opts = {}) => {
    return React.memo((props) => {
        const onKeyDown = React.useCallback((ev) => {
            var _a;
            if ((opts.keyCodes || CLICK_KEYS).includes(ev.which || ev.keyCode)) {
                if (ev.currentTarget) {
                    // triggers the click of the current element
                    ev.currentTarget.click();
                }
                if ((_a = opts.stopPropagation) !== null && _a !== void 0 ? _a : true) {
                    // stops propagation by default
                    ev.preventDefault();
                    ev.stopPropagation();
                }
            }
        }, []);
        return React.createElement(Component, Object.assign({}, props, { onKeyDown: onKeyDown }));
    });
};
const SpanKeyboarHandled = withKeyboardHandler(styled.span ``);
export const PillButtonRemove = styled(SpanKeyboarHandled)(({ theme, small }) => `
    cursor: pointer;
  
    svg {
      fill: ${!small
    ? theme.buttons.pills.regular.color
    : theme.buttons.pills.small.color};
  
      &:hover {
        fill: ${!small
    ? theme.buttons.pills.regular.colorHover
    : theme.buttons.pills.small.colorHover};
      }
    }
  `);
// Variables
const btnWidth = `${spacing.sm}`;
const btnHeight = `${spacing.lg}`;
const btnFontSize = "14px";
const btnBorderWidth = "1px";
const btnBorderStyle = "solid";
const btnGutter = `${spacing.sm}`;
export const Button = styled.button.attrs(({ ariaSelected }) => ({
    "aria-selected": ariaSelected,
})) `
  ${({ theme, fullWidth, large, marginLeft, desktopOnly, adjustForTouch, }) => `
  width: ${fullWidth ? "100%" : "auto"};
  display: inline-flex;
  justify-content: center;
  align-items: center;
  min-width: ${btnWidth};
  min-height: ${btnHeight};
  padding: 0 ${btnGutter};
  cursor: pointer;
  box-sizing: border-box;
  font-family: ${theme.buttons.globalThemeFontFamily};
  font-size: ${btnFontSize};
  font-weight: ${theme.buttons.globalThemeFontWeight};
  border: ${btnBorderWidth} ${btnBorderStyle} transparent;
  user-select: none;
  border-radius: ${theme.buttons.globalThemeBorderRadius};
  margin: 0;

  &:disabled {
    cursor: inherit;
  }

  & > span:not(:first-child) {
    margin-left: ${spacing.xs};
  }
  
  ${!!marginLeft && `margin-left: ${marginLeft}px`};
    
  ${large && `padding: ${spacing.sm} ${btnGutter};`} 

  ${desktopOnly &&
    `
    ${mediaQueries("md", { noLower: true })} {
      display: none;
    }
  `};

  ${adjustForTouch &&
    `
    ${mediaQueries("sm")} {
      font-size: ${theme.body.fontSize};
      min-height: ${mobileCtaTouchHeight};
    }
  `};
`}
`;
export const PillButtonDiv = styled.div `
  ${({ theme, isActive, small }) => `
  min-width: ${spacing.sm};
  min-height: ${spacing.lg};
  display: flex;
  flex-shrink: 0;
  align-items: center;
  max-width: 100%;
  overflow: hidden;
  text-transform: ${theme.buttons.pills.textTransform};

  &:not(:last-child) {
    margin-right: ${spacing.xs};
  }

  & > span:not(:first-child) {
    margin-left: 0;
  }
  
  ${PillButtonRemove} {
    svg {
      fill: ${!isActive && !small
    ? theme.buttons.pills.regular.color
    : isActive
        ? theme.buttons.pills.active.color
        : theme.buttons.pills.small.color};
    }
  }

  color: ${!isActive && !small
    ? theme.buttons.pills.regular.color
    : isActive
        ? theme.buttons.pills.active.color
        : theme.buttons.pills.small.color};

  background-color: ${!isActive && !small
    ? theme.buttons.pills.regular.backgroundColor
    : isActive
        ? theme.buttons.pills.active.backgroundColor
        : theme.buttons.pills.small.backgroundColor};

  border: 1px solid ${!isActive && !small
    ? theme.buttons.pills.regular.borderColor
    : isActive
        ? theme.buttons.pills.active.borderColor
        : theme.buttons.pills.small.borderColor};
 
  padding: ${!isActive && !small
    ? theme.buttons.pills.regular.padding
    : isActive
        ? theme.buttons.pills.active.padding
        : theme.buttons.pills.small.padding};
 
  margin-bottom: ${spacing.xs};
  font-family: ${theme.typography.text.body.fontFamily};
  font-size: ${theme.typography.text.fontSM.fontSize};
  font-weight: ${!isActive && !small
    ? theme.buttons.pills.regular.fontWeight
    : isActive
        ? theme.buttons.pills.active.fontWeight
        : theme.buttons.pills.small.fontWeight};
  cursor: pointer;
  outline: inherit;
  border-radius: ${theme.buttons.pills.borderRadius};
  box-shadow: ${small ? "none" : shadows.small};

  -webkit-user-drag: none;
  -khtml-user-drag: none;
  -moz-user-drag: none;
  -o-user-drag: none;

  &:active,
  &:focus {
    border-color: ${!isActive && !small
    ? theme.buttons.pills.regular.borderColorSelected
    : isActive
        ? theme.buttons.pills.active.borderColorSelected
        : theme.buttons.pills.small.borderColorSelected};
  }

  &:hover {
    text-decoration: ${!isActive && !small
    ? theme.buttons.pills.regular.textDecorationHover
    : isActive
        ? theme.buttons.pills.active.textDecorationHover
        : theme.buttons.pills.small.textDecorationHover};
    font-weight: ${!isActive && !small
    ? theme.buttons.pills.regular.fontWeightHover
    : isActive
        ? theme.buttons.pills.active.fontWeightHover
        : theme.buttons.pills.small.fontWeightHover};
    color: ${!isActive && !small
    ? theme.buttons.pills.regular.colorHover
    : isActive
        ? theme.buttons.pills.active.colorHover
        : theme.buttons.pills.small.colorHover};
    svg {
      fill: ${!isActive && !small
    ? theme.buttons.pills.regular.colorHover
    : isActive
        ? theme.buttons.pills.active.colorHover
        : theme.buttons.pills.small.colorHover};
    }

    ${PillButtonRemove} {
      svg {
        fill: ${!isActive && !small
    ? theme.buttons.pills.regular.colorHover
    : isActive
        ? theme.buttons.pills.active.colorHover
        : theme.buttons.pills.small.colorHover};
      }
    }
  }

  &:visited {
    color: ${!isActive && !small
    ? theme.buttons.pills.regular.colorVisited
    : isActive
        ? theme.buttons.pills.active.colorVisited
        : theme.buttons.pills.small.colorVisited};
    svg {
      fill: ${!isActive && !small
    ? theme.buttons.pills.regular.colorVisited
    : isActive
        ? theme.buttons.pills.active.colorVisited
        : theme.buttons.pills.small.colorVisited};
    }
  }

  svg {
    fill: ${!isActive && !small
    ? theme.buttons.pills.regular.color
    : isActive
        ? theme.buttons.pills.active.color
        : theme.buttons.pills.small.color};
  }

  ${mediaQueries("md", { noLower: true })} {
    ${small && `padding: ${spacing.xs}`}
  }
`};
`;
export const PillButton = styled(Button) `
  ${({ theme, isActive, small }) => `
  display: flex;
  flex-shrink: 0;
  align-items: center;
  max-width: 100%;
  overflow: hidden;
  text-transform: ${theme.buttons.pills.textTransform};

  &:not(:last-child) {
    margin-right: ${spacing.xs};
  }

  text-decoration: ${!isActive && !small
    ? theme.buttons.pills.regular.textDecoration
    : isActive
        ? theme.buttons.pills.active.textDecoration
        : theme.buttons.pills.small.textDecoration};

  & > span:not(:first-child) {
    margin-left: 0;
  }
  
  ${PillButtonRemove} {
    svg {
      fill: ${!isActive && !small
    ? theme.buttons.pills.regular.color
    : isActive
        ? theme.buttons.pills.active.color
        : theme.buttons.pills.small.color};
    }
  }

  color: ${!isActive && !small
    ? theme.buttons.pills.regular.color
    : isActive
        ? theme.buttons.pills.active.color
        : theme.buttons.pills.small.color};

  background-color : ${!isActive && !small
    ? theme.buttons.pills.regular.backgroundColor
    : isActive
        ? theme.buttons.pills.active.backgroundColor
        : theme.buttons.pills.small.backgroundColor};

  border: 1px solid ${!isActive && !small
    ? theme.buttons.pills.regular.borderColor
    : isActive
        ? theme.buttons.pills.active.borderColor
        : theme.buttons.pills.small.borderColor};
 
  padding: ${!isActive && !small
    ? theme.buttons.pills.regular.padding
    : isActive
        ? theme.buttons.pills.active.padding
        : theme.buttons.pills.small.padding};

  margin-bottom: ${spacing.xs};
  font-family: ${theme.typography.text.body.fontFamily};
  font-size: ${theme.typography.text.fontSM.fontSize};
  font-weight: ${!isActive && !small
    ? theme.buttons.pills.regular.fontWeight
    : isActive
        ? theme.buttons.pills.active.fontWeight
        : theme.buttons.pills.small.fontWeight};
  cursor: pointer;
  outline: inherit;
  border-radius: ${theme.buttons.pills.borderRadius};
  box-shadow: ${small ? "none" : shadows.small};

  -webkit-user-drag: none;
  -khtml-user-drag: none;
  -moz-user-drag: none;
  -o-user-drag: none;

  &:active,
  &:focus {
    border-color: ${!isActive && !small
    ? theme.buttons.pills.regular.borderColorSelected
    : isActive
        ? theme.buttons.pills.active.borderColorSelected
        : theme.buttons.pills.small.borderColorSelected};
  }

  &:hover {
    text-decoration: ${!isActive && !small
    ? theme.buttons.pills.regular.textDecorationHover
    : isActive
        ? theme.buttons.pills.active.textDecorationHover
        : theme.buttons.pills.small.textDecorationHover};
    font-weight: ${!isActive && !small
    ? theme.buttons.pills.regular.fontWeightHover
    : isActive
        ? theme.buttons.pills.active.fontWeightHover
        : theme.buttons.pills.small.fontWeightHover};
    color: ${!isActive && !small
    ? theme.buttons.pills.regular.colorHover
    : isActive
        ? theme.buttons.pills.active.colorHover
        : theme.buttons.pills.small.colorHover};
    svg {
      fill: ${!isActive && !small
    ? theme.buttons.pills.regular.colorHover
    : isActive
        ? theme.buttons.pills.active.colorHover
        : theme.buttons.pills.small.colorHover};
    }
    ${PillButtonRemove} {
      svg {
        fill: ${!isActive && !small
    ? theme.buttons.pills.regular.colorHover
    : isActive
        ? theme.buttons.pills.active.colorHover
        : theme.buttons.pills.small.colorHover};
      }
    }
  }

  &:visited {
    color: ${!isActive && !small
    ? theme.buttons.pills.regular.colorVisited
    : isActive
        ? theme.buttons.pills.active.colorVisited
        : theme.buttons.pills.small.colorVisited};
    svg {
      fill: ${!isActive && !small
    ? theme.buttons.pills.regular.colorVisited
    : isActive
        ? theme.buttons.pills.active.colorVisited
        : theme.buttons.pills.small.colorVisited};
    }
  }

  svg {
    fill: ${!isActive && !small
    ? theme.buttons.pills.regular.color
    : isActive
        ? theme.buttons.pills.active.color
        : theme.buttons.pills.small.color};
  }

  ${mediaQueries("md", { noLower: true })} {
    ${small && `padding: ${spacing.xs}`}
  }

`};
`;
export const FacetButtonDiv = styled.div `
  ${({ theme, isActive, small }) => `
  min-width: ${spacing.sm};
  min-height: ${spacing.lg};
  display: flex;
  flex-shrink: 0;
  align-items: center;
  max-width: 100%;
  overflow: hidden;
  text-transform: ${theme.buttons.facets.textTransform};

  &:not(:last-child) {
    margin-right: ${spacing.xs};
  }

  & > span:not(:first-child) {
    margin-left: 0;
  }
  
  ${PillButtonRemove} {
    svg {
      fill: ${!isActive && !small
    ? theme.buttons.facets.regular.color
    : isActive
        ? theme.buttons.facets.active.color
        : theme.buttons.facets.small.color};
    }
  }

  color: ${!isActive && !small
    ? theme.buttons.facets.regular.color
    : isActive
        ? theme.buttons.facets.active.color
        : theme.buttons.facets.small.color};

  background-color : ${!isActive && !small
    ? theme.buttons.facets.regular.backgroundColor
    : isActive
        ? theme.buttons.facets.active.backgroundColor
        : theme.buttons.facets.small.backgroundColor};

  border: 1px solid ${!isActive && !small
    ? theme.buttons.facets.regular.borderColor
    : isActive
        ? theme.buttons.facets.active.borderColor
        : theme.buttons.facets.small.borderColor};
 
  padding: ${!isActive && !small
    ? theme.buttons.facets.regular.padding
    : isActive
        ? theme.buttons.facets.active.padding
        : theme.buttons.facets.small.padding};
 
  margin-bottom: ${spacing.xs};
  font-family: ${theme.typography.text.body.fontFamily};
  font-size: ${theme.typography.text.fontSM.fontSize};
  font-weight: ${!isActive && !small
    ? theme.buttons.facets.regular.fontWeight
    : isActive
        ? theme.buttons.facets.active.fontWeight
        : theme.buttons.facets.small.fontWeight};
  cursor: pointer;
  outline: inherit;
  border-radius: ${theme.buttons.facets.borderRadius};
  box-shadow: ${small ? "none" : shadows.small};

  -webkit-user-drag: none;
  -khtml-user-drag: none;
  -moz-user-drag: none;
  -o-user-drag: none;

  &:active,
  &:focus {
    border-color: ${!isActive && !small
    ? theme.buttons.facets.regular.borderColorSelected
    : isActive
        ? theme.buttons.facets.active.borderColorSelected
        : theme.buttons.facets.small.borderColorSelected};
  }

  &:hover {
    text-decoration: ${!isActive && !small
    ? theme.buttons.facets.regular.textDecorationHover
    : isActive
        ? theme.buttons.facets.active.textDecorationHover
        : theme.buttons.facets.small.textDecorationHover};
    font-weight: ${!isActive && !small
    ? theme.buttons.facets.regular.fontWeightHover
    : isActive
        ? theme.buttons.facets.active.fontWeightHover
        : theme.buttons.facets.small.fontWeightHover};
    color: ${!isActive && !small
    ? theme.buttons.facets.regular.colorHover
    : isActive
        ? theme.buttons.facets.active.colorHover
        : theme.buttons.facets.small.colorHover};
    svg {
      fill: ${!isActive && !small
    ? theme.buttons.facets.regular.colorHover
    : isActive
        ? theme.buttons.facets.active.colorHover
        : theme.buttons.facets.small.colorHover};
    }
    ${PillButtonRemove} {
      svg {
        fill: ${!isActive && !small
    ? theme.buttons.facets.regular.colorHover
    : isActive
        ? theme.buttons.facets.active.colorHover
        : theme.buttons.facets.small.colorHover};
      }
    }
  }

  &:visited {
    color: ${!isActive && !small
    ? theme.buttons.facets.regular.colorVisited
    : isActive
        ? theme.buttons.facets.active.colorVisited
        : theme.buttons.facets.small.colorVisited};
    svg {
      fill: ${!isActive && !small
    ? theme.buttons.facets.regular.colorVisited
    : isActive
        ? theme.buttons.facets.active.colorVisited
        : theme.buttons.facets.small.colorVisited};
    }
  }

  svg {
    fill: ${!isActive && !small
    ? theme.buttons.facets.regular.color
    : isActive
        ? theme.buttons.facets.active.color
        : theme.buttons.facets.small.color};
  }

  ${mediaQueries("md", { noLower: true })} {
    ${small && `padding: ${spacing.xs}`}
  }
`};
`;
export const FacetButton = styled(Button) `
  ${({ theme, isActive, small }) => `
  display: flex;
  flex-shrink: 0;
  align-items: center;
  max-width: 100%;
  overflow: hidden;
  text-transform: ${theme.buttons.facets.textTransform};

  &:not(:last-child) {
    margin-right: ${spacing.xs};
  }

  text-decoration: ${!isActive && !small
    ? theme.buttons.facets.regular.textDecoration
    : isActive
        ? theme.buttons.facets.active.textDecoration
        : theme.buttons.facets.small.textDecoration};

  & > span:not(:first-child) {
    margin-left: 0;
  }
  
  ${PillButtonRemove} {
    svg {
      fill: ${!isActive && !small
    ? theme.buttons.facets.regular.iconColor
    : isActive
        ? theme.buttons.facets.active.iconColor
        : theme.buttons.facets.small.iconColor};
    }
  }

  color: ${!isActive && !small
    ? theme.buttons.facets.regular.color
    : isActive
        ? theme.buttons.facets.active.color
        : theme.buttons.facets.small.color};

  background-color : ${!isActive && !small
    ? theme.buttons.facets.regular.backgroundColor
    : isActive
        ? theme.buttons.facets.active.backgroundColor
        : theme.buttons.facets.small.backgroundColor};

  border: 1px solid ${!isActive && !small
    ? theme.buttons.facets.regular.borderColor
    : isActive
        ? theme.buttons.facets.active.borderColor
        : theme.buttons.facets.small.borderColor};
 
  padding: ${!isActive && !small
    ? theme.buttons.facets.regular.padding
    : isActive
        ? theme.buttons.facets.active.padding
        : theme.buttons.facets.small.padding};

  margin-bottom: ${spacing.xs};
  font-family: ${theme.typography.text.body.fontFamily};
  font-size: ${theme.typography.text.fontSM.fontSize};
  font-weight: ${!isActive && !small
    ? theme.buttons.facets.regular.fontWeight
    : isActive
        ? theme.buttons.facets.active.fontWeight
        : theme.buttons.facets.small.fontWeight};
  cursor: pointer;
  outline: inherit;
  border-radius: ${theme.buttons.facets.borderRadius};
  box-shadow: ${small ? "none" : shadows.small};

  -webkit-user-drag: none;
  -khtml-user-drag: none;
  -moz-user-drag: none;
  -o-user-drag: none;

  &:active,
  &:focus {
    border-color: ${!isActive && !small
    ? theme.buttons.facets.regular.borderColorSelected
    : isActive
        ? theme.buttons.facets.active.borderColorSelected
        : theme.buttons.facets.small.borderColorSelected};
  }

  &:hover {
    text-decoration: ${!isActive && !small
    ? theme.buttons.facets.regular.textDecorationHover
    : isActive
        ? theme.buttons.facets.active.textDecorationHover
        : theme.buttons.facets.small.textDecorationHover};
    font-weight: ${!isActive && !small
    ? theme.buttons.facets.regular.fontWeightHover
    : isActive
        ? theme.buttons.facets.active.fontWeightHover
        : theme.buttons.facets.small.fontWeightHover};
    color: ${!isActive && !small
    ? theme.buttons.facets.regular.colorHover
    : isActive
        ? theme.buttons.facets.active.colorHover
        : theme.buttons.facets.small.colorHover};
  }
  &:visited {
    color: ${!isActive && !small
    ? theme.buttons.facets.regular.colorVisited
    : isActive
        ? theme.buttons.facets.active.colorVisited
        : theme.buttons.facets.small.colorVisited};
  }
  ${mediaQueries("md", { noLower: true })} {
    ${small && `padding: ${spacing.xs}`}
  }

`};
`;
export const PrimaryButton = styled(Button) `
  ${({ theme }) => `
  background-color: ${theme.buttons.primary.static.bgColor};
  color: ${theme.buttons.primary.static.color};
  border-color: ${theme.buttons.primary.static.borderColor};
  font-weight: ${theme.buttons.primary.fontWeight};
  fill: ${theme.buttons.primary.static.borderColor};
  text-transform: ${theme.buttons.primary.textTransform};

  &:hover {
    background-color: ${theme.buttons.primary.hover.bgColor};
    color: ${theme.buttons.primary.hover.color};
    border-color: ${theme.buttons.primary.hover.borderColor};
    fill: ${theme.buttons.primary.hover.borderColor};
  }

  &:active {
    background-color: ${theme.buttons.primary.clicked.bgColor};
    color: ${theme.buttons.primary.clicked.color};
    border-color: ${theme.buttons.primary.clicked.borderColor};
    fill: ${theme.buttons.primary.clicked.borderColor};
  }

  &:disabled {
    background-color: ${theme.buttons.primary.disabled.bgColor};
    color: ${theme.buttons.primary.disabled.color};
    border-color: ${theme.buttons.primary.disabled.borderColor};
    fill: ${theme.buttons.primary.disabled.borderColor};
  }
`};
`;
export const AddToCartLists = styled(Button) `
  ${({ theme }) => `
  background-color: ${theme.buttons.primary.static.bgColor};
  color: ${theme.buttons.primary.static.color};
  border-color: ${theme.buttons.primary.static.borderColor};
  font-weight: ${theme.buttons.primary.fontWeight};
  fill: ${theme.buttons.primary.static.borderColor};
  width: 189px;
  &:hover {
    background-color: ${theme.buttons.primary.hover.bgColor};
    color: ${theme.buttons.primary.hover.color};
    border-color: ${theme.buttons.primary.hover.borderColor};
    fill: ${theme.buttons.primary.hover.borderColor};
  }

  &:active {
    background-color: ${theme.buttons.primary.clicked.bgColor};
    color: ${theme.buttons.primary.clicked.color};
    border-color: ${theme.buttons.primary.clicked.borderColor};
    fill: ${theme.buttons.primary.clicked.borderColor};
  }

  &:disabled {
    background-color: ${theme.buttons.primary.disabled.bgColor};
    color: ${theme.buttons.primary.disabled.color};
    border-color: ${theme.buttons.primary.disabled.borderColor};
    fill: ${theme.buttons.primary.disabled.borderColor};
  }

  ${mediaQueries("md", { noUpper: false })} {
    width: 126px;
  }

  ${mediaQueries("sm")} {
    width: 126px;
  }
`};
`;
export const AddToCartPdp = styled(Button) `
  ${({ theme, fullWidth }) => `
  width:100%;
  background-color: ${theme.buttons.addToCart.static.bgColor};
  color: ${theme.buttons.addToCart.static.color};
  border-color: ${theme.buttons.addToCart.static.borderColor};
  font-weight: ${theme.buttons.primary.fontWeight};
  fill: ${theme.buttons.addToCart.static.color};
  text-transform: ${theme.buttons.addToCart.textTransform};

  &:hover {
    background-color: ${theme.buttons.addToCart.hover.bgColor};
    color: ${theme.buttons.addToCart.hover.color};
    border-color: ${theme.buttons.addToCart.hover.borderColor};
    fill: ${theme.buttons.primary.hover.color};
  }

  &:active {
    background-color: ${theme.buttons.addToCart.clicked.bgColor};
    color: ${theme.buttons.addToCart.clicked.color};
    border-color: ${theme.buttons.addToCart.clicked.borderColor};
    fill: ${theme.buttons.primary.clicked.color};
  }

  &:disabled {
    background-color: ${theme.buttons.addToCart.disabled.bgColor};
    color: ${theme.buttons.addToCart.disabled.color};
    border-color: ${theme.buttons.addToCart.disabled.borderColor};
    fill: ${theme.buttons.primary.disabled.color};
  }

  ${!fullWidth &&
    `
    ${mediaQueries("md", { noUpper: false })} {
      max-width:256px;
    }
  `}
`};
`;
export const PrimaryLightButton = styled(Button) `
  ${({ theme }) => `
  background-color: ${theme.buttons.primaryLight.static.bgColor};
  color: ${theme.buttons.primaryLight.static.color};
  border-color: ${theme.buttons.primaryLight.static.borderColor};
  font-weight: ${theme.buttons.primaryLight.fontWeight};
  fill: ${theme.buttons.primaryLight.static.borderColor};
  text-transform: ${theme.buttons.primaryLight.textTransform};

  &:hover {
    background-color: ${theme.buttons.primaryLight.hover.bgColor};
    color: ${theme.buttons.primaryLight.hover.color};
    border-color: ${theme.buttons.primaryLight.hover.borderColor};
    fill: ${theme.buttons.primaryLight.hover.borderColor};
  }

  &:active {
    background-color: ${theme.buttons.primaryLight.clicked.bgColor};
    color: ${theme.buttons.primaryLight.clicked.color};
    border-color: ${theme.buttons.primaryLight.clicked.borderColor};
    fill: ${theme.buttons.primaryLight.clicked.borderColor};
  }

  &:disabled {
    background-color: ${theme.buttons.primaryLight.disabled.bgColor};
    color: ${theme.buttons.primaryLight.disabled.color};
    border-color: ${theme.buttons.primaryLight.disabled.borderColor};
    fill: ${theme.buttons.primaryLight.disabled.borderColor};
  }
`};
`;
export const SecondaryButton = styled(Button) `
  ${({ theme }) => `
  background-color: ${theme.buttons.secondary.static.bgColor};
  color: ${theme.buttons.secondary.static.color};
  border-color: ${theme.buttons.secondary.static.borderColor};
  font-weight: ${theme.buttons.secondary.fontWeight};
  fill: ${theme.buttons.secondary.static.borderColor};
  text-transform: ${theme.buttons.secondary.textTransform};

  &:hover {
    background-color: ${theme.buttons.secondary.hover.bgColor};
    color: ${theme.buttons.secondary.hover.color};
    border-color: ${theme.buttons.secondary.hover.borderColor};
    fill: ${theme.buttons.secondary.hover.color};
  }

  &:active {
    background-color: ${theme.buttons.secondary.clicked.bgColor};
    color: ${theme.buttons.secondary.clicked.color};
    border-color: ${theme.buttons.secondary.clicked.borderColor};
    fill: ${theme.buttons.secondary.clicked.color};
  }

  &:disabled {
    background-color: ${theme.buttons.secondary.disabled.bgColor};
    color: ${theme.buttons.secondary.disabled.color};
    border-color: ${theme.buttons.secondary.disabled.borderColor};
    fill: ${theme.buttons.secondary.disabled.borderColor};
  }
`};
`;
export const ActiveAddressButton = styled(Button) `
  ${({ theme }) => `
  background-color: ${theme.buttons.activeAddress.backgroundColor};
  color: ${theme.buttons.primary.static.color};
  border-color: ${theme.buttons.activeAddress.borderColor};
  font-weight: ${theme.buttons.secondary.fontWeight};
  fill: ${theme.buttons.primary.static.color};
  text-transform: ${theme.buttons.secondary.textTransform};
  cursor: initial;
  
  &:hover {
    background-color: ${theme.buttons.activeAddress.backgroundColor};
    color: ${theme.buttons.primary.static.color};
    border-color: ${theme.buttons.activeAddress.borderColor};
    fill: ${theme.buttons.primary.static.color};
  }

  &:active {
    background-color: ${theme.buttons.activeAddress.backgroundColor};
    color: ${theme.buttons.primary.static.color};
    border-color: ${theme.buttons.activeAddress.borderColor};
    fill: ${theme.buttons.primary.static.color};
  }

  &:disabled {
    background-color: ${theme.buttons.activeAddress.backgroundColor};
    color: ${theme.buttons.secondary.disabled.color};
    border-color: ${theme.buttons.activeAddress.borderColor};
    fill: ${theme.buttons.secondary.disabled.borderColor};
  }
`};
`;
export const SecondaryLightButton = styled(Button) `
  ${({ theme }) => `
  background-color: ${theme.buttons.secondaryLight.static.bgColor};
  color: ${theme.buttons.secondaryLight.static.color};
  border-color: ${theme.buttons.secondaryLight.static.borderColor};
  font-weight: ${theme.buttons.secondaryLight.fontWeight};
  fill: ${theme.buttons.secondaryLight.static.borderColor};
  text-transform: ${theme.buttons.secondaryLight.textTransform};

  &:hover {
    background-color: ${theme.buttons.secondaryLight.hover.bgColor};
    color: ${theme.buttons.secondaryLight.hover.color};
    border-color: ${theme.buttons.secondaryLight.hover.borderColor};
    fill: ${theme.buttons.secondaryLight.hover.borderColor};
  }

  &:active {
    background-color: ${theme.buttons.secondaryLight.clicked.bgColor};
    color: ${theme.buttons.secondaryLight.clicked.color};
    border-color: ${theme.buttons.secondaryLight.clicked.borderColor};
    fill: ${theme.buttons.secondaryLight.clicked.borderColor};
  }

  &:disabled {
    background-color: ${theme.buttons.secondaryLight.disabled.bgColor};
    color: ${theme.buttons.secondaryLight.disabled.color};
    border-color: ${theme.buttons.secondaryLight.disabled.borderColor};
    fill: ${theme.buttons.secondaryLight.disabled.borderColor};
  }
`};
`;
export const TertiaryButton = styled(Button) `
  ${({ theme }) => `
  background-color: ${theme.buttons.tertiary.static.bgColor};
  color: ${theme.buttons.tertiary.static.color};
  border-color: ${theme.buttons.tertiary.static.borderColor};
  font-weight: ${theme.buttons.tertiary.fontWeight};
  fill: ${theme.buttons.tertiary.static.borderColor};
  text-transform: ${theme.buttons.tertiary.textTransform};

  &:hover {
    background-color: ${theme.buttons.tertiary.hover.bgColor};
    color: ${theme.buttons.tertiary.hover.color};
    border-color: ${theme.buttons.tertiary.hover.borderColor};
    fill: ${theme.buttons.tertiary.hover.borderColor};
  }

  &:active {
    background-color: ${theme.buttons.tertiary.clicked.bgColor};
    color: ${theme.buttons.tertiary.clicked.color};
    border-color: ${theme.buttons.tertiary.clicked.borderColor};
    fill: ${theme.buttons.tertiary.clicked.borderColor};
  }

  &:disabled {
    background-color: ${theme.buttons.tertiary.disabled.bgColor};
    color: ${theme.buttons.tertiary.disabled.color};
    border-color: ${theme.buttons.tertiary.disabled.borderColor};
    fill: ${theme.buttons.tertiary.disabled.borderColor};
  }
`};
`;
export const SaveToListButton = styled(Button) `
  ${({ theme }) => `
  background-color: ${theme.buttons.secondary.static.bgColor};
  color: ${theme.buttons.secondary.static.color};
  border-color: ${theme.buttons.secondary.static.bgColor};
  font-weight: ${theme.buttons.secondary.fontWeight};
  fill: ${theme.buttons.secondary.static.borderColor};

  &:hover {
    background-color: ${theme.buttons.secondary.hover.color};
    color: ${theme.buttons.secondary.clicked.bgColor};
    border-color: ${theme.buttons.secondary.hover.color};
    fill: ${theme.buttons.secondary.hover.bgColor};
  }

  &:active {
    background-color: ${theme.buttons.secondary.clicked.color};
    color: ${theme.buttons.secondary.clicked.bgColor};
    border-color: ${theme.buttons.secondary.clicked.bgColor};
    fill: ${theme.buttons.secondary.clicked.borderColor};
  }

  &:disabled {
    background-color: ${theme.buttons.secondary.disabled.bgColor};
    color: ${theme.buttons.secondary.disabled.color};
    border-color: ${theme.buttons.secondary.disabled.bgColor};
    fill: ${theme.buttons.secondary.disabled.borderColor};
  }
`};
`;
export const CheckoutButton = styled(Button) `
  ${({ theme, desktopOnly }) => `
  background-color: ${theme.buttons.checkout.static.bgColor};
  color: ${theme.buttons.checkout.static.color};
  border-color: ${theme.buttons.checkout.static.borderColor};
  font-weight: ${theme.buttons.checkout.fontWeight};
  font-size: ${spacing.sm};
  fill: ${theme.buttons.checkout.static.borderColor};
  text-transform: ${theme.buttons.checkout.textTransform};

  &:hover {
    background-color: ${theme.buttons.checkout.hover.bgColor};
    color: ${theme.buttons.checkout.hover.color};
    border-color: ${theme.buttons.checkout.hover.borderColor};
    fill: ${theme.buttons.checkout.hover.borderColor};
  }

  &:active {
    background-color: ${theme.buttons.checkout.clicked.bgColor};
    color: ${theme.buttons.checkout.clicked.color};
    border-color: ${theme.buttons.checkout.clicked.borderColor};
    fill: ${theme.buttons.checkout.clicked.borderColor};
  }

  &:disabled {
    background-color: ${theme.buttons.checkout.disabled.bgColor};
    color: ${theme.buttons.checkout.disabled.color};
    border-color: ${theme.buttons.checkout.disabled.borderColor};
    fill: ${theme.buttons.checkout.disabled.borderColor};
  }

  ${mediaQueries("md", { noLower: true })} {
    ${!desktopOnly &&
    `
      display: block;
      margin: auto;
      width: 25%;
    `};
  }

  ${mediaQueries("sm")} {
    width: 100%;
  }
`};
`;
export const CancelableButton = styled(Button) `
  ${({ theme }) => `
  background-color: ${theme.colors.uiColors.greyscale5};
  color: ${theme.colors.uiColors.greyscale1};
  border-color: ${theme.colors.brandColors.secondary3};
  fill: ${theme.colors.uiColors.greyscale1};
`};
`;
export const MiniMenuButton = styled(Button) `
  ${({ theme }) => `
  border-radius: 0;
  min-height: ${spacing.lgr};
  justify-content: left;
  background-color: ${theme.colors.brandColors.primary5};
  color: ${theme.colors.brandColors.primary1};
  font-weight: ${theme.buttons.globalThemeFontWeight};
  fill: ${theme.colors.brandColors.primary1};
  &:hover {
    background-color: ${theme.colors.brandColors.primary5};
    color: ${theme.colors.brandColors.primary1};
    fill: ${theme.colors.brandColors.primary1};
  }

  :not(:last-child) {
    border-bottom: ${btnBorderWidth} ${btnBorderStyle} ${theme.colors.uiColors.greyscale3};
  }
`};
`;
export const IconTransparentButton = styled(Button) `
  appearance: none;
  background-color: transparent !important;
  border: none !important;
  cursor: pointer;
  padding: 0;
  &:hover {
    background-color: transparent;
    border: none;
  }

  svg {
    margin: 0;
  }
`;
export const NoStylesButton = styled(Button) `
  background-color: transparent;
  padding: 0;
  font-weight: 0;
`;
export const CouponButton = styled(Button) `
  ${({ theme }) => `
  background-color: ${theme.buttons.coupon.static.bgColor};
  border-color: ${theme.buttons.coupon.static.borderColor};
  color: ${theme.buttons.coupon.static.color};
  border-width: 1px;
  border-style: dashed;
  border-radius: ${theme.buttons.globalThemeBorderRadius};
  font-weight: ${theme.buttons.coupon.fontWeight};
  fill: ${theme.buttons.coupon.static.couponIconColor};

  &:hover {
    background-color: ${theme.buttons.coupon.hover.bgColor};
    border-color: ${theme.buttons.coupon.hover.borderColor};
    color: ${theme.buttons.coupon.hover.color};
    fill: ${theme.buttons.coupon.hover.couponIconColor};
  }
  &:active {
    background-color: ${theme.buttons.coupon.clicked.bgColor};
    border-color: ${theme.buttons.coupon.clicked.borderColor};
    color: ${theme.buttons.coupon.clicked.color};
    fill: ${theme.buttons.coupon.clicked.couponIconColor};
  }
  &.clipped {
    background-color: ${theme.buttons.coupon.clipped.bgColor};
    border-color: ${theme.buttons.coupon.clipped.borderColor};
    color: ${theme.buttons.coupon.clipped.color};
    fill: ${theme.buttons.coupon.clipped.couponIconColor};
  }
`};
`;
export const FilterSortButton = styled(Button) `
  ${({ theme }) => `
    position: relative;
    background-color: ${theme.colors.uiColors.greyscale1};
    border-color: ${theme.colors.uiColors.greyscale3};
    color: ${theme.buttons.filterSort.color};
    fill: ${theme.colors.uiColors.greyscale4};
    font-weight: ${theme.buttons.primary.fontWeight};

    &:hover {
      background-color: ${theme.colors.uiColors.greyscale1};
      border-color: ${theme.colors.uiColors.greyscale3};
      color: ${theme.buttons.filterSort.hoverColor};
      fill: ${theme.colors.uiColors.greyscale4};
    }

    &:active {
      background-color: ${theme.colors.uiColors.greyscale1};
      border-color: ${theme.colors.uiColors.greyscale3};
      color: ${theme.buttons.coupon.hover.color};
      fill: ${theme.colors.uiColors.greyscale4};
    }

    &:disabled {
      background-color: ${theme.colors.uiColors.greyscale1};
      border-color: ${theme.colors.uiColors.greyscale3};
      color: ${theme.buttons.primary.disabled.color};
      fill: ${theme.colors.uiColors.greyscale3};
    }

    span {
      margin-right: auto;
    }
  `};
`;
export const SearchButton = styled(Button) `
  ${({ theme, isActive }) => `
    height: ${spacing.lg};
    width: ${spacing.lg};
    min-width: ${spacing.lg};
    padding: 0;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    justify-content: center;
    align-items: center;
    right: ${spacing.xs};
    cursor: pointer;
    display: flex;
    border-radius: ${theme.buttons.globalThemeBorderRadius};
    border: none;
      background-color: ${isActive ? theme.colors.brandColors.primary1 : "transparent"};
      &:hover {
        background-color: ${isActive
    ? theme.colors.brandColors.primary1
    : theme.colors.uiColors.greyscale2};
      }
      svg {
        fill: ${isActive
    ? theme.colors.uiColors.greyscale1
    : theme.colors.brandColors.primary1};
      }
`};
`;
export const ButtonLink = styled.button `
  ${({ theme }) => `
  appearance: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: ${spacing.xxs};
  margin: 0;
  font: inherit;
  text-align: left;
  line-height: 1;
  color: ${theme.typography.links.static.color};
  text-decoration: ${theme.typography.links.static.textDecoration};
  &:hover {
    color: ${theme.typography.links.hover.color};
    text-decoration: ${theme.typography.links.hover.textDecoration};
  }
  &:active {
    color: ${theme.typography.links.clicked.color};
    text-decoration: ${theme.typography.links.clicked.textDecoration};
  }
  &:visited {
    color: ${theme.typography.links.visited.color};
    text-decoration: ${theme.typography.links.visited.textDecoration};
  }
`}
`;
export const MiniCartButton = styled(Button) `
  ${({ theme, isActive }) => {
    const { activeColor, borderRadius, color, activeBackgroundColor, backgroundColor, activeIconColor, iconColor, hoverBackgroundColor, } = theme.buttons.miniCart;
    return `
    border-radius: ${borderRadius};
    color: ${isActive ? activeColor : color};
    background: ${isActive ? activeBackgroundColor : backgroundColor};

    &:hover {
        ${!isActive && `background: ${hoverBackgroundColor};`}
    }
    svg {
      fill: ${isActive ? activeIconColor : iconColor};
    }
  `;
}}
`;
//# sourceMappingURL=Button.styles.js.map