import styled from "styled-components";
export const StrategyDialogDiv = styled.div `
    background: #ffffff;
    border: 1px solid #f1f1f6;
    box-sizing: border-box;
    box-shadow: 0px 4px 16px -4px rgba(39, 41, 50, 0.08);
    border-radius: 8px;
    position: absolute;
    z-index: 10;
`;
export const StrategyDialogContent = styled.div `
    position: relative;
    padding: 8px 20px 4px;

    min-width: 300px;

    .StrategyDialog-close {
        position: absolute;
        top: 0;
        right: 0;
        min-width: 0;
        padding: 0;
    }

    .StrategyDialog-title {
        color: #272932;

        text-align: center;
        padding: 16px 0;

        font-family: Inter;
        font-style: normal;
        font-weight: 600;
        font-size: 16px;
        line-height: 100%;
    }

    .StrategyDialog-select,
    .Strategy-error {
        width: 196px;

        &.StrategyDialog-select-error {
            margin-bottom: 4px;
            .MuiOutlinedInput-input {
                color: #ee3e54;
            }
        }

        .MuiOutlinedInput-input {
            height: auto;
            border: solid 1px rgba(39, 41, 50, 0.2);
            padding: 6px 12px;

            color: #272932;

            font-family: Inter;
            font-style: normal;
            font-weight: normal;
            font-size: 14px;
            line-height: 140%;
        }
    }

    .StrategyDialog-table {
        .MuiTableCell-root {
            padding: 8px 0;

            color: rgba(39, 41, 50, 0.6);

            font-family: Inter;
            font-style: normal;
            font-weight: 500;
            font-size: 12px;
            line-height: 140%;
            border-bottom: 1px solid rgba(39, 41, 50, 0.05);

            &.MuiTableCell-head {
                font-family: Inter;
                font-style: normal;
                font-weight: 600;
                font-size: 12px;
                line-height: 140%;
                color: rgba(39, 41, 50, 0.3);
                border-bottom: 1px solid rgba(39, 41, 50, 0.2);
            }
        }
        .StrategyDialog-default__text {
            color: #35b687;
            font-family: Inter;
            font-style: normal;
            font-weight: normal;
            font-size: 14px;
            line-height: 140%;
            margin-left: 20px;
        }
    }
`;
export const TitleDiv = styled("div") `
    background: transparent;
    min-width: 100px;
    display: flex;
    padding-right: 24px;

    ${(props) => !props.isCollapsed &&
    `
		position: absolute;
		top: -22px;
		left: 2px;
	`}

    .InlineEdit {
        min-width: 100px;
        max-width: 100%;
        overflow: hidden;
        height: 20px;
        ${(props) => (props.isNormal ? `cursor: text` : "cursor: default")};
    }

    .MuiTypography-body1 {
        line-height: 1;
    }

    .InlineEdit-label {
        padding: 0;
        max-width: 100%;
        border-bottom: none;
        &:hover {
            background: transparent;
            border-bottom: none;
        }
    }

    .InlineEdit-input {
        position: relative;
        display: inline-block;
        .MuiInputBase-input {
            padding: 0;
            max-width: 100%;
            border: none;
            position: absolute;
            top: 0;
            left: 0;
        }

        &::before {
            content: "${(props) => props.content || ""}";
            font-size: 15px;
            line-height: 25px;
            display: block;
            font-family: Inter;
            font-style: normal;
            font-weight: 600;
            padding: 0;
            letter-spacing: 0.5px;
            opacity: 0;
        }
    }

    .InlineEdit-label,
    .InlineEdit-input .MuiInputBase-input {
        font-family: Inter;
        font-style: normal;
        font-weight: 600;
        line-height: 20px;
        ${(props) => `
			color: ${props.styles.color || "rgba(39, 41, 50, 0.7)"};
			font-size: ${props.styles.fontSize || "12px"};
			letter-spacing: ${props.styles.letterSpacing || "0.5px"};
		`}
    }
`;
export const StyledIconButton = styled.div `
    display: flex;
    background: #fff;
    cursor: pointer;

    width: 31px;
    height: 30px;
    border-left: solid 1px #f1f1f6;

    align-items: center;
    justify-content: center;

    &.stack-move {
        position: relative;

        img {
            opacity: 0.5;
        }

        &::after {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            content: "";
            height: 100%;
        }
    }

    &:first-child {
        width: 30px;
        border-left: none;
    }
`;
export const OnDiv = styled.div `
    color: #35b687;
    font-family: Inter;
    font-style: normal;
    font-weight: bold;
    font-size: 8px;
    line-height: 140%;
`;
export const OffDiv = styled.div `
    color: rgba(39, 41, 50, 0.3);
    font-family: Inter;
    font-style: normal;
    font-weight: bold;
    font-size: 8px;
    line-height: 140%;
`;
export const DraggableItemDiv = styled.div `
    border: 1px solid #e6e9ed;
    border-radius: 5px;
    color: #677c95;
    cursor: pointer;
    font-family: Inter;
    font-style: normal;
    font-weight: normal;
    font-size: 14px;
    line-height: 24px;
    color: #272932;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;

    margin-bottom: 10px;
    padding: 8px;

    ${(props) => props.isDragging
    ? `
			padding: 5px !important;
		`
    : `
			height: 28px;
			width: 28px;
		`}

    @media (min-width: 1366px) {
        height: auto;
        width: auto;
        justify-content: flex-start;
    }

    > img {
        margin-right: 0;
        transform: scale(0.88);
        @media (min-width: 1366px) {
            margin-right: 8px;
            transform: scale(1);
        }
    }

    .favorite-icon {
        position: absolute;
        opacity: 0;
        top: 50%;
        transform: translateY(-50%);
        right: 12px;
        display: flex;
    }

    ${(props) => !props.isDragging &&
    `
		&:hover .favorite-icon {
			opacity: 1;
		}
	`}

    span {
        display: none;
        @media (min-width: 1366px) {
            display: inline;
        }
    }
`;
//# sourceMappingURL=CommonStyles.js.map