import styled from "styled-components";

const IconWrapper = styled.div`
  z-index: 2;
  svg {
    path {
      fill: ${(p) => p.theme.color.interactiveInverse};
    }
  }
`;

const Wrapper = styled.button<{ size: "S" | "M"; longButton: boolean }>`
  display: flex;
  background-color: ${(p) => p.theme.color.interactive01};
  width: ${(p) => (p.longButton ? "auto" : p.size === "S" ? "32px" : "48px")};
  height: ${(p) => (p.size === "S" ? "32px" : "48px")};
  justify-content: center;
  align-items: center;
  border-radius: ${(p) => (p.longButton ? `0 ${p.theme.spacing.m} ${p.theme.spacing.m} 0` : "50%")};
  cursor: pointer;
  position: relative;
  box-shadow: ${(p) => p.theme.shadow.shadowL};
  padding: ${(p) => (p.longButton ? `0 ${p.theme.spacing.xs}` : "0")};
  :before {
    content: "";
    border-radius: ${(p) => (p.longButton ? `0 ${p.theme.spacing.m} ${p.theme.spacing.m} 0` : "50%")};
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 0.1s;
  }
  :focus {
    outline: none;
  }
  :focus-visible {
    outline: ${(p) => `1px solid ${p.theme.color.interactive02}`};
  }
  :hover:before {
    background-color: ${(p) => p.theme.color.overlayHoverDark};
    opacity: 1;
  }
  :focus:before,
  :focus-visible:before {
    background-color: ${(p) => p.theme.color.overlayFocusDark};
    opacity: 1;
  }
  :active:before {
    background-color: ${(p) => p.theme.color.overlayPressedDark};
    opacity: 1;
  }
  :disabled {
    cursor: default;
    background-color: ${(p) => p.theme.color.interactiveDisabled};
    :hover:before,
    :focus:before,
    :focus-visible:before,
    :active:before {
      background-color: transparent;
    }
  }

  ${IconWrapper} {
    width: ${(p) => (p.size === "S" ? "16px" : "24px")};
    height: ${(p) => (p.size === "S" ? "16px" : "24px")};
  }
`;

const Text = styled.div`
  ${(p) => p.theme.textStyle.uiButton};
  color: ${(p) => p.theme.color.interactiveInverse};
`;

export { Wrapper, Text, IconWrapper };
