"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.Item = void 0;
const react_1 = require("@emotion/react");
const styled_1 = __importDefault(require("@emotion/styled"));
const TextStyles_1 = require("../../../core/TextStyles");
const Colors_1 = require("../../../core/Colors");
exports.Item = styled_1.default.div `
	width: 100%;
	height: 48px;
	padding: 15px 25px;
	background-color: ${Colors_1.basicColors.white};
	${(0, TextStyles_1.title2)({ color: Colors_1.basicColors.gray400 })}

	${({ disabled }) => disabled &&
    (0, react_1.css) `
			background-color: ${Colors_1.basicColors.gray50};
			color: ${Colors_1.basicColors.gray200};
			cursor: not-allowed;
		`}

	&:active {
		background-color: ${Colors_1.basicColors.gray25};
	}
`;
