.CreateCategoryModal {
    color: rgba(var(--center-channel-color-rgb));

    .wrapper {
        .dialog {
            width: 600px;
            height: auto;
        }
    }

    .CreateCategory {
        display: flex;
        flex-direction: column;
        padding: 0 32px 24px;
        gap: 24px;

        .inputWrapper {
            position: relative;

            .inputWrapper__close-wrapper {
                position: absolute;
                height: 100%;
                top: 0;
                right: 0;
                display: flex;
                align-items: center;
                padding-right: 12px;
            }

            .CloseCircle {
                cursor: pointer;
                font-size: 18px;
                color: rgba(var(--center-channel-color-rgb), 0.64);

                &:hover {
                    color: rgba(var(--center-channel-color-rgb), 0.8);
                }
            }
        }

        .categoryNameInput {
            width: 100%;
        }

        input {
            height: 48px;
            font-size: 16px;
            border-radius: 4px;
            border: 1px solid rgba(var(--center-channel-color-rgb), 0.16);
            background: var(--center-channel-bg);
            color: var(--center-channel-color);
            padding: 0 16px;
            flex: 1;
            transition: border 0.15s ease-in;

            &:focus {
                border-color: var(--button-bg);
                box-shadow: inset 0 0 0 1px var(--button-bg);
            }
        }

        .footer {
            display: flex;
            flex-direction: row;
            justify-content: flex-end;
        }

        .createCategoryActions {
            display: flex;
            flex-direction: row;
            justify-content: flex-end;
            margin-top: auto;
            gap: 12px;
        }
    }
}
