import styled from "styled-components";
import { gray } from "../../../../core/colors/colors";
import { fonts } from "../../../../styles/fonts";

export const NumberInputContainer = styled.div<{
  unit?: string;
  enableButton?: boolean;
}>`
  display: flex;

  input::-webkit-inner-spin-button {
    appearance: none;
    -moz-appearance: none;
    -webkit-appearance: none;
  }

  div:first-child {
    width: ${({ enableButton }) => enableButton && "352px"};

    position: relative;

    input {
      padding-right: ${({ unit }) => unit && "40px"};

      border-radius: ${({ enableButton }) => enableButton && "8px 0 0 8px"};
    }
  }

  div:first-child::before {
    content: ${({ unit }) => `"${unit}"`};

    position: absolute;
    right: 16px;

    color: ${gray[300]};

    ${fonts["body-r"]}
  }
`;

export const ButtonContainer = styled.div`
  width: 48px;
  height: 40px;

  display: flex;
  flex-direction: column;

  & > button {
    width: 100%;
    height: 50%;

    border: 1px solid ${gray[300]};
    border-left: 0;

    background-color: ${gray[100]};

    cursor: pointer;

    svg {
      width: 16px;
      height: 16px;

      stroke: ${gray[800]};
    }
  }

  & > button:hover {
    background-color: ${gray[200]};
  }

  & > button:first-child {
    border-bottom: 0;

    border-top-right-radius: 8px;
  }

  & > button:last-child {
    border-bottom-right-radius: 8px;
  }
`;
