import { Menu, Typography } from "@material-ui/core";
import styled from "styled-components";
export const ValueEditorWrapper = styled.div `
    position: relative;
    min-width: 120px;
    min-height: 44px;
    display: flex;
    align-items: center;
    flex-direction: column;

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

    &:after {
        display: block;
        content: "${(props) => props.content}";
        height: 0;
        visibility: hidden;
        padding: 0 12px;
        opacity: 0;
    }

    .MuiInputBase-input,
    .MuiInputBase-input,
    .MuiOutlinedInput-input {
        font-family: Inter !important;
        font-size: 12px !important;
        font-style: normal;
        font-weight: 400 !important;
        line-height: 17px !important;
        letter-spacing: 0px;
        text-align: left;
        color: rgba(39, 41, 50, 0.8);
    }

    .MuiOutlinedInput-input,
    .TextList-TextBox,
    .NumberList-NumberBox {
        padding: 6px 12px;
        background: rgba(64, 80, 166, 0.05);
    }

    .TextList-TextBox .MuiOutlinedInput-input {
        background: transparent;
    }

    .MuiOutlinedInput-input {
        height: 20px;
    }

    .MuiOutlinedInput-notchedOutline {
        border: none;
        border-bottom: solid 1px rgba(64, 80, 166, 0.35);
        border-radius: 0;
    }

    .MuiFormControl-root {
        display: flex;
    }

    .MuiSwitch-root {
        height: 25px !important;
        width: 40px !important;
        padding: 0;
        border-radius: 20px;
    }

    .MuiSwitch-switchBase {
        padding: 2px !important;

        &.Mui-checked {
            transform: translateX(15px) !important;
        }
    }

    input[type="date"],
    input[type="datetime-local"] {
        position: relative;

        &::-webkit-calendar-picker-indicator {
            position: absolute;
            right: 0;
            top: 50%;
            transform: translateY(-50%);
            height: 20px;
            width: 20px;
            opacity: 0;
        }
        &:hover::-webkit-calendar-picker-indicator {
            opacity: 1;
        }
    }

    input[type="number"]::-webkit-outer-spin-button,
    input[type="number"]::-webkit-inner-spin-button {
        -webkit-appearance: none;
        margin: 0;
    }

    /* Firefox */
    input[type="number"] {
        -moz-appearance: textfield;
    }
`;
export const EditLayerWrapper = styled(Menu) `
    && {
        .MuiMenu-paper {
            background: #fff;
            border: 1px solid #f1f1f6;
            border-radius: 5px;

            min-width: 200px;
            z-index: 10;

            .MuiMenu-list {
                display: flex;
                flex-direction: column;

                > div {
                    padding: 5px;
                }

                .MuiInputBase-input,
                .MuiInputBase-input,
                .MuiOutlinedInput-input {
                    font-family: Inter !important;
                    font-size: 12px !important;
                    font-style: normal;
                    font-weight: 400 !important;
                    line-height: 17px !important;
                    letter-spacing: 0px;
                    text-align: left;
                    color: rgba(39, 41, 50, 0.8);
                }

                .MuiOutlinedInput-input {
                    padding: 6px 12px;
                    background: rgba(64, 80, 166, 0.05);
                    height: 20px;
                }

                .MuiOutlinedInput-notchedOutline {
                    border: none;
                    border-bottom: solid 1px rgba(64, 80, 166, 0.35);
                    border-radius: 0;
                }

                .MuiFormControl-root {
                    display: flex;
                }

                .MuiSwitch-root {
                    height: 25px !important;
                    width: 40px !important;
                    padding: 0;
                    border-radius: 20px;
                }

                .MuiSwitch-switchBase {
                    padding: 2px !important;

                    &.Mui-checked {
                        transform: translateX(15px) !important;
                    }
                }

                input[type="date"],
                input[type="datetime-local"] {
                    position: relative;

                    &::-webkit-calendar-picker-indicator {
                        position: absolute;
                        right: 0;
                        top: 50%;
                        transform: translateY(-50%);
                        height: 20px;
                        width: 20px;
                        opacity: 0;
                    }
                    &:hover::-webkit-calendar-picker-indicator {
                        opacity: 1;
                    }
                }

                input[type="number"]::-webkit-outer-spin-button,
                input[type="number"]::-webkit-inner-spin-button {
                    -webkit-appearance: none;
                    margin: 0;
                }

                /* Firefox */
                input[type="number"] {
                    -moz-appearance: textfield;
                }
            }
        }
    }
`;
export const FieldNameRender = styled.div `
    font-size: 12px;
    font-weight: 500;
    color: rgba(64, 80, 166, 1);
    display: flex;
    align-items: center;
    min-height: 32px;
`;
export const StyledTypography = styled(Typography) ``;
export const DisplayEditModeRender = styled.div `
    position: relative;
    min-width: 120px;
    min-height: 44px;
    display: flex;
    align-items: center;
`;
export const EditModeValueEditorRender = styled.div `
    border-radius: 2px;
    width: 100%;
    min-height: 100%;
    display: flex;
    align-items: center;

    max-width: ${(props) => (`${props.content}`.length > 0 ? `${`${props.content}`.length * 6.25}px` : "none")};
    min-width: 100%;
`;
export const Row = styled.div `
    position: relative;

    .ValueEditor-delete-line {
        opacity: 0;
        transition: opacity 0.1s ease-in;
    }

    &:hover .ValueEditor-delete-line {
        opacity: 1;
    }
`;
export const DeleteButton = styled.div `
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #fff;

    box-shadow: 0px 6px 8px -2px rgba(39, 41, 50, 0.08);
    cursor: pointer;
`;
//# sourceMappingURL=DesignUI.js.map